CODEWITHSUNDEEP
jqueryscrollfullpage.js
Lidia K.
Lidia K.

Reputation: 279

aos.js doesn't wrk with fullPage.js

I use FullPage for animate scrolling between sections.

I want to get items appear with aos.js but when fullPage.js working aos doesn't work.

Upvotes: 2

Views: 4125

Answers (2)

Mateusz Michnowicz
Mateusz Michnowicz

Reputation: 1

I made this solution - maybe it's not perfect, but works for me. Also, I used jQuery.

AOS.init();  // AOS initiation

$('.aos-init').removeClass('aos-animate'); // remove ALL classes which triggers animation in document

new fullpage('#fullpage', {   // standard fullpage usage
    responsive: true,
    navigation: true,
    anchors: ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'],

    afterLoad: function(){       
        var a_table = ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'];   // duplicated table of anchors name

        for (var i = 0; i < a_table.length; i++) {
            $('.section-'+ a_table[i] +'.active .aos-init').addClass('aos-animate'); // all magic goes here - when page is active, then all elements with AOS will start animate
        }
    }
}

Upvotes: 0

Alvaro
Alvaro

Reputation: 41595

As detailed in the fullPage.js FAQs

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature. Or... use parallax:true with the Parallax extension.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

But I would encourage you to use fullPage.js callbacks to fire animations or the fullPage.js state classes if you want to do them with CSS. See this video tutorial.

Upvotes: 2

Related Questions