Fullpage.js Lets solve this once and for all together!

Design help Animations & Interactions
23

@AlexManyeki
Can you weigh in on that?

24

@ToreSBentsen @marsh
im familiar with the scrollbar:true workaround.
Im trying to figure out the code way of doing it using callbacks.

1 Like
25

Hi @Nir totally understand you are looking at how to overcome this with callbacks, so sorry to keep going here with the scrollBar:true workaround :slight_smile:

Just wanted to demonstrate @ToreSBentsen suggestion of some CSS to remove the scrollbar so you end up with the overall design you are looking for and the ability to add scroll triggered interactions. Hereā€™s the updated demo link with scroll bar removed in Chrome

26

Based on skimming the above thread, have you considered adding tiny divs (positioned absolute and evenly distributed from top-to-bottom of body), that act as interaction triggers?

Trigger implementation would be similar to this: https://webflow.com/website/Webflow-Sticky-Sections

Alternatively, here is another route: https://webflow.com/website/Advanced-Slider-with-Fullpagejs

27

Hi @marsh, no worries, your demo looks good though. Cloneable link?

28

Hi @Cjh I gave that a try just now but doesnā€™t seem to be working.

29

The second link I shared is only using Webflow interactions to animate the scroll transition.

Another old experimental example thatā€™s using only fullpage.js with 100% Webflow Interactions:

Designer Preview

Live Site (works on desktop only)

30

Hereā€™s a cloneable link to the demo I created as requested @Nir :slight_smile:

1 Like
31

Im not sure why but when I replace the code i have on my example to your code it doesnā€™t work fully.
I can still see the scrollbar.

32

@Nir are you using Firefox or Chrome?

33

Chrome.
seems like everything else works well, just that the scrollbar is still there.

34

Have you added the following to page head code (above the css for fullPage JS in clone)?

<style>
.body {
  /* These rules create an artificially confined space, so we get 
 a scrollbar that we can hide. They are not directly involved in 
 hiding the scrollbar. */

  border: none;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.body{
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.body::-webkit-scrollbar { 
  /* This is the magic bit for WebKit */
  display: none;
}
</style>

Note, the Firefox scrollbar hide doesnā€™t seem to work anymore, not sure if anyone knows how to remove it using CSS??

35

Yup, I used your code from the clone.

36

Can you share preview link with me, Iā€™ll take a look

37

https://preview.webflow.com/preview/numbers-85a700-c6d0583178672699d6cf21e3?utm_source=numbers-85a700-c6d0583178672699d6cf21e3&preview=044e59e175165698cc14c90f81b4dd79

38

Try adding class of Body to the body element, the code to hide scroll bar on chrome is calling on class of body so this needs to be set. Should work after this is added.

39

Magic @marsh :slight_smile:

40

Can confirm this script works perfectly with Scroll Into View interactions - weā€™ve got this going on our company website with scrollBar:true. Combine that with the CSS at the bottom of this thread, and youā€™re set.

41

Hi @Cjh
Can you share a cloneable link to this?

This btw works like a charm! Any way I can create buttons that will link to specific slides?
https://webflow.com/website/Scroll-Trigger-Slider

42

Hey! So I havenā€™t really been experiencing any issues at all or seen the need to add a faux wrapper of any kind with scroll based interactions using fullpage as long as scrollBar: true, and normalScrollElements: ā€˜#scrollableā€™ are added.

However, what about these same interactions being triggered when the arrow keys are being used or thereā€™s a side navigation such as on the tesla.com website?

Any thoughts here?

I see that @marsh has it working on his example, but that the scrolling is super jittery for some reason.