Fullpage.js & Interaction animations

Design help Animations & Interactions
3

I’ve probably answered this many times (and in fact, I did on the topic you linked), but the easiest solution is to just use the option scrollBar: true in the fullPage.js initialization.

new fullpage('#fullpage', {
   scrollBar: true
});

So, instead of this code you are currently using:

new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});

It should be this:

new fullpage('#fullpage', {
    //options here
    scrollBar: true,
    autoScrolling:true,
    scrollHorizontally: true,
    licenseKey: 'YOUR KEY'
});

Webflow animations get triggered by the scrolled position. If you remove the scroll bar, then fullPage.js page doesn’t actually scroll. The scroll effect is simulated by using translate3d transformation on the fullPage.js wrapper. This is answered also in the fullPage.js FAQs.

If for any reason you prefer not to use a scrollbar, then you’ll have to deal with JavaScript code using fullPage.js callbacks to trigger those animations. (by adding a class on certain elements for example)

:point_right: See this demo in codepen

There’s yet another option if you are not a fan of JS, and it’s to use conditional CSS. Not as flexible but doable. All you have to do is make use of the fullpage.js state classes. (Such as active, fp-viewing-x-y etc)

:point_right: See this demo in Codepen.

Having said this, use scrollBar: true and your life might be much easier in this respect, specially if you don’t control JS very well.

1 Like