CODEWITHSUNDEEP
jqueryhtmlcssfullpage.js
Andi Stevenson
Andi Stevenson

Reputation: 17

Using Fullpage.js which method should I use to trigger jquery animation when section is visible?

I am using Fullpage.js on my website, I am trying to call some jquery animate functions when a user scrolls to a section of my website. I have tried using mouseenter, mouseover, mouseleave (from the previous section) however when I scroll the the next section it does not pick up that the mouse has entered the section and therefore animations do not play until the mouse is moved. What method should I use for the animation to play as soon as the section has been scrolled to and is visible?

Upvotes: 0

Views: 176

Answers (1)

Alvaro
Alvaro

Reputation: 41595

You should be using fullPage.js callbacks like afterLoad or afterSlideLoads.

Check this example from the fullpage.js docs:

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

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

        //using index
        if(origin.index == 2){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(origin.anchor == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

Check the examples folder where you'll find the callbacks examples.

You can also find the callbacks example online here.

Upvotes: 1

Related Questions