Some people get surprised when they find out that Webflow interactions and scroll-into-view animations are no longer working when using fullPage.js on their pages. But don't despair! You can still do something to fix it.

Webflow animations are triggered based on the scroll position or the scroll event. Therefore you need to enable the scroll bar in fullPage.js for Webflow to fire animations.

You can do that by using the fullpage.js option scrollBar:true on the fullPage.js initialization:

var myFullpage = new fullpage('#fullpage', {
        // rest of your settings here
        //....

        scrollBar: true
});

If you do not want to do that for any reason, you’ll have to use:

Use fullPage.js Callacks to Trigger Animations on Webflow

fullPage.js provides a set of Callbacks you can use to trigger certain actions when leaving or landing on certain vertical sections or horizontal slides.

Here's an example on how it works:

var myFullpage = new fullpage('#fullpage', {
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
        afterLoad: function(origin, destination, direction, trigger){
            
            // when loading section 2
            if(destination.index == 1){
                document.querySelector('#section2').querySelector('img').style.left = 0 + 'px';
                document.querySelector('#section2').querySelector('p').style.opacity = 1;
            }
        }
    });

You can also look at this particular example, which shows how to trigger animations using fullPage.js callbacks. 

Use fullPage.js State Classes to Trigger Animations on Webflow

You can see the following video on how to create animations using just the fullPage.js CSS state classes.

(Note it's from an old fullPage.js version, but the procedure is identical on newer versions of fullPage.js)

 

You might also find these articles relevant: