Fullpage.js & Interaction animations

It seems like it’s still not possible to have a full section scroll snap (like with fullpage.js, css scrolljack, or scrollify…) and have scroll into view animations play. In fact, it seems like this could be fixed and I’ve tried to explain the issue how it’s registered the sections, but I don’t have the skills to fix it.

I’ve read a bunch of posts where hundreds, maybe thousands of people are looking for a solution to this - for example, this clonable project longer works…[TUTORIAL] How to get interactions working with fullPage JS - #8 by gushon

Here is a loom to the issue:

Link to test project below
https://preview.webflow.com/preview/fullpage-scroll-with-animations?utm_medium=preview_link&utm_source=designer&utm_content=fullpage-scroll-with-animations&preview=468a733f7835e1da9600d0e3c458f94f&workflow=preview

This is to bump the issue for @Alvaro_Trigo

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.

I see you are mentioning the new update of fullPage.js version 4.

I can’t be sure whats your issue as I can’t inspect your site. You provided a link to the editor but not to the published page, so I can’t actually see the resulting source code.
If you post it here that’d be easier to debug :wink:

But if the problem you are having right now was not present in fullpage.js 3, then another very easy fix is to go back to using fullPage.js 3.

All you have to do is specify the version of fullPage.js you want to use on the CDN links.

I’ve seen many Webflow developers using CDNs in un unsafe way with this update, so I’ve created this article to clarify why some pages are breaking and what’s the correct way of using CDN links to load CSS or JS files.

Thanks for responding Alvaro - I do appreciate your time and if I can get this to work, I will be purchasing the commercial license.

Here is the link to the test page.
https://fullpage-scroll-with-animations.webflow.io/

I’ve tried scrollBar: true with no change. I’m happy to run a scrollbar.

I’ve only started using this so don’t know if v3 will work vs v4.

I don’t really control JS at all!

Please tell me if I’m doing something wrong, but the new initialization and options snippet provided makes no difference.