AOS does not work with fullpage.js

[ux-leap]

• Question

Hi I'm experiencing an issue with AOS & fullpage.js. Both of them are loading with no errors but AOS does not show the content. I'm using:

https://alvarotrigo.com/fullPage/ & initing AOS after render of fullPage:

afterRender: AOS.init()

Is there any way to make this work?

[vaban-ru]

• Question

Hi I'm experiencing an issue with AOS & fullpage.js. Both of them are loading with no errors but AOS does not show the content. I'm using:

https://alvarotrigo.com/fullPage/ & initing AOS after render of fullPage:

afterRender: AOS.init()

Is there any way to make this work?

I have a similar problem. When full screen scrolling AOS does not work and the animation does not work. Did you find any solution? I tried AOS.refresh() and AOS.refreshHard() and it did not help. I also tried to add a class aos-animate but script still removes it myself.

[likewhoa]

subscribed, running into same issue here. I can only play one animation on the first section and other section have their elements hidden who have any of the AOS animations set.

[think2011]

fullpage({
      afterLoad(_, index) {
        if (index === 1) {
          return
        }

        const $section = $('.section').eq(index - 1)
        $section.find('[data-aos]').addClass('aos-animate')
      },
      ...
    })

A little bit foible, but can work.

[kayaz]

afterLoad: function(){
	$('.fp-table.active .aos-init').addClass('aos-animate');
},

[gr0hiik]

I think I've got a solution - maybe it's not perfect, but works for me. I used last version of AOS, fullpage.js and 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
        }
    }
});

`

Unfortunetly, animation triggers only once per scroll.

[reza-mamun]

This will trigger animations with every scroll:

new fullpage('.fullpage', {
    //.............................................
    //....Your other options....
    //..............................................
    onLeave: function(){
        jQuery('.section [data-aos]').removeClass("aos-animate");
    },
    onSlideLeave: function(){
        jQuery('.slide [data-aos]').removeClass("aos-animate");
    },
    afterSlideLoad: function(){
        jQuery('.slide.active [data-aos]').addClass("aos-animate");
    },
    afterLoad: function(){
        jQuery('.section.active [data-aos]').addClass("aos-animate");
       //jQuery('.fp-table.active .aos-init').addClass('aos-animate');
    }
});

[hayden-664]

afterLoad: function(){
	$('.fp-table.active .aos-init').addClass('aos-animate');
},

Thanks for the answer, in my case, I was not using jquery, so I tweaked it to the traditional javascript way:

afterLoad: function() {
  document.querySelectorAll('.fp-table.active .aos-init').forEach((el) => {
    el.classList.add('aos-animate')
  })
}

[pettrushkov]

afterLoad: function(){ $('.fp-table.active .aos-init').addClass('aos-animate'); },

Thank you, this works for me, but I have initial problem on first screen of fullpage. all works from second screen. Do someone have same problem?

[breath-co2]

add option:

afterLoad: function(before, after){
    after.item.querySelectorAll('.aos-init').forEach((el) => {
      el.classList.add('aos-animate')
    })
  },
  beforeLeave: function(before, after) {
    before.item.querySelectorAll('.aos-init').forEach((el) => {
      el.classList.remove('aos-animate')
    })
  }