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.
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
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?
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
See an example here:
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 ?
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.
I’ve added the scrollBar:true option and now the scroll bar shows, but the scroll into view animation still doesn’t fire. Has this changed since 2019 @Alvaro_Trigo?
