Animations triggered way before scroll reaches the elements

[juanpablob]

Hello there, I have a SPA in VueJS and I have AOS attributes attached to a few HTML elements in the landing page, the thing is that the behavior seem to be off. Some animations are executed way before scrolling. When I reload the page, the animations in the first two scrolls are working correctly and they appear as they should, right when you scroll to those elements but for the further scrolls (4th, 5th), the animation seem to be executed way before the scroll reach those elements. I have tried with an offset of 1200 and it works as it should, but it doesn't make any sense because my browser viewport is 1680x1050 (Macbook Pro 13"). If I remove the offset attribute of 1200, the animation will be executed when the scroll offset is around 1000 pixels before the element.

AOS Version: 2.3.4 MacOS 11.1 Browser: Brave Version 1.19.86 Chromium: 88.0.4324.96 (Official Build) (x86_64)

Do you have any ideas what could be happening? Has anyone experienced something like this before? Thank you in advance for any suggestion you might have!

Best, Juan Pablo

[kamaladenalhomsi]

+1

[lolocava]

+1

[Kaynshin]

+1

[chandlertrinity]

This is happening for me as well. I have some animations right at the fold on load and they animate.

[techtanic]

+1

[bego-mx]

Same here, is there any way to fix this without using data-aos-offset?

[chandlertrinity]

I fixed my issue on why it was triggering the animations early. I had to wait for all the assets to load on the window and not the document.

This didn't work: document.addEventListener('DOMContentLoaded', function() { AOS.init(); });

This worked: window.addEventListener('load', function() { AOS.init(); });

From what I can gather, this works because the window now has the assets loaded and AOS knows the height of each element in order to animate on scroll at the correct offset.

[ghost]

Hi,

I had the same problem.

Reading this thread I tried the solution from @chandlertrinity....and the problem now is gone!!

So guys, you need to initialize Aos on the "load" event of the window, and not on the "DOMContentLoaded" event, exactly like @chandlertrinity said.

[juanpablob]

Thank you very much you all for this! I had my code like this:

created () {
    AOS.init({ once: true });
    window.addEventListener('load', AOS.refresh);
}

Now I won't initialize ASOS and then refresh it upon load event, I will just init it when load event is called.

[samcodes-io]

Thank you very much you all for this! I had my code like this:

created () {
    AOS.init({ once: true });
    window.addEventListener('load', AOS.refresh);
}

Now I won't initialize ASOS and then refresh it upon load event, I will just init it when load event is called.

this solution worked for me, thanks!

[joel-foo]

Thank you very much you all for this! I had my code like this:

created () {
    AOS.init({ once: true });
    window.addEventListener('load', AOS.refresh);
}

Now I won't initialize ASOS and then refresh it upon load event, I will just init it when load event is called.

Great solution!

[neilmonroe]

I was also able to get this to work as intended by simply setting the startEvent property to load during AOS initialization to tie into the page load event. This could be changed to any event name you want, if you do other custom load initialization.

AOS.init({
  startEvent: 'load'
});

[jeremy0x]

Thanks @neilmonroe. That works!

[tanishqkrk]

You're a god. Thank you!