Streaming live at 10am (PST)

Fullpage.js not working with Webflow scroll into view animations

Hello everyone,

I really hope that someone could help. I implemented fullpage.js on this website: https://digitalleadership.webflow.io/test and I also added some scroll into view animations.

The main problem is that Webflow animations are often not triggered because fullpage.js is preventing default scrolling. For example if you use mouse-wheel instead of mouse pad none of the animations will be triggered.

I would be so thankful for any advice since I haven’t managed to solve it.

All the best,
Nikola

Webflow animatinos are triggered based on the scroll position or the scroll event. Therefore you need to enable the scrollbar in fullPage.js for webflow to fire animations.
You can do that by using the fullpage.js option scrollBar:true

If you do not want to do that for any reason, then you’ll have to make use of fullpage.js callbacks or fullPage.js state classes to do so.

You can see a video tutorial I did back in the day regarding how to create fullpage.js animations using just CSS:

There’s also an example available on the examples folder that uses callbacks to trigger animations.

I hope that helps! :wink:

1 Like

Thank you so much @Alvaro_Trigo. I think the scrollBar:true would not work because client wants to keep section scroll that fullpage.js provides.

If I understood you well I would have to remove all the animations from Webflow and then to use fullpage.js callback “afterLoad” in order to animate elements on the page?

All the best,
Nikola

Thank you so much @Alvaro_Trigo. I think the scrollBar:true would not work because client wants to keep section scroll that fullpage.js provides.

You can keep the auto scrolling effect while showing the scrollbar, those options are totally compatible :slight_smile:

See an example here:
https://alvarotrigo.com/fullPage/examples/scrollBar.html

If I understood you well I would have to remove all the animations from Webflow and then to use fullpage.js callback “afterLoad” in order to animate elements on the page?

Only if you do not go for the scrollBar:true option.
You can use callbacks or CSS state classes, as per my video above.

Hey @Alvaro_Trigo I managed to implement Scrollbar functionality and it works perfectly with Webflow scroll into view animations. The only problem is that onLeave function partially stopped working. On this page: https://digitalleadership.webflow.io/test-2 the logo should change color in each section. In first section it should be white and in second section it should become dark blue.

For some reason when you go from section 1 to section 2 it changes color from white to dark blue, but when I go in the opposite direction it doesn’t work. “Index” option seems not to work with Scrollbar:true ?

Here is an example where logo changing color works well but there is no Scrollbar functionality : https://digitalleadership.webflow.io/

Make sure to update your callbacks to the ones from version 3.
See the docs:
https://github.com/alvarotrigo/fullPage.js#callbacks

Hey @Alvaro_Trigo the link you sent is not working unfortunately. Thanks in advance!

Github might be down. Wait for some time :slight_smile:
There’s nothing I can do there.

It works perfectly!!! Thanks a lot @Alvaro_Trigo you were so helpful!

Glad it did! :wink:
Enjoy it!

Unfortunately I can’t get it done either.

I have 2 logos in the top left: 1 white and 1 black. In sections 1 & 2 the black logo is at 0% opacity.
Section 3 and further the black logo becomes 100%. Now I’ve an interaction at section 3 with scroll out of view, so the black goes to 0%. But when scrolling to section 4, the black logo will not turn back to 100%.
I’ve tried everything: scroll into view combined with out of view, the interaction at containers of 95% VH. All without result. hopefully somebody can help me.

It worked! The solution was an interaction ‘out of scroll’ but with nothing happen (a blank animation). Apparently that functions as a kind of reset.