Fullpage.js & Interaction animations

Design help Animations & Interactions
1

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

2

This is to bump the issue for @Alvaro_Trigo

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
4

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.

5

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.

6

Regarding interaction animations, I’ve been having weird interactions where it works just fine when scrolling down, but as soon as I scroll back up, the scroll velocity increases and skips a whole section. I’m using the afterLoad callback to switch between the fullPage scroll and the “normal”/responsive scroll, as I only want some sections in the beginning to have the effect.

It seems like the setResponsive method is not always applied though?

Here’s the code for the callback I used:

afterLoad: function(origin, destination, direction, trigger){
      	var origin = this;

        //after leaving section 3
        if(origin.index == 2 && direction =='down'){
            fullpage_api.setResponsive(true);
            console.log('origin = 2 and direction = down');
        }
        else if(origin.index == 3 && direction == 'up'){
            fullpage_api.setResponsive(false);
            console.log('origin = 3 and direction = up');
        }
}

Preview link: Webflow - Unscene

Any ideas why this is happening @Alvaro_Trigo ?

7

@danlundesign If you think there’s a bug in fullPage.js feel free to create an issue ont he Github repository together with an isolated reproduction of the issue in jsfiddle or codepen.

For further assistance consider getting a Business license from the Pricing page:

8

Hi
Thank you for this helpful library and conversation. Would like to know is there any option to re-trigger animation that currently apply on 1st time loaded page and than no on scroll up and down?

I want to trigger animation everytime without reload the page.