aos:in event does not fire if the animated element is on screen when the page loads

[akrikorian85]

This is:

• Bug

Specifications

• AOS version: 3.0.0-beta.5
• OS: Windows 10 Pro
• Browser: Chrome 69.0.3497.100 (Official Build) (64-bit)

Expected Behavior

I was expecting aos:init to fire

Actual Behavior

aos:in event does not fire if an animated element is on screen when the page loads. I am calling AOS.init() and adding the event handler on DOM ready. I am using the data-aos="fade-up" attribute

Steps to Reproduce the Problem

AOS.init(); document.addEventListener('aos:in', ({ detail }) => { console.dir(detail); });

On Chrome, scroll to the animated elements and refresh the page. They will fade up, but you will not see the element being logged in the console.

Detailed Description

Possible Solution

Is it racing? Are you triggering the event on scroll?

[michalsnik]

Thanks for posting this issue @akrikorian85 ! I'll check it out

[ibanjo]

Got the same behaviour with this configuration:

• AOS version: 2.3.3
• OS: MacOS 10.12.6
• Browser: Chrome 69.0.3497.100 (Official Build) (64-bit)

[Zokor]

Same, when page loads it stays hidden the elements that should be shown. They only appear on scroll. So it appears an empty page for the user at the beginning.

[AFlorencia]

Hello, any sugestions?

[Zokor]

You can this for example:

$("body,html").animate({ scrollTop: 1 }, 0);

for it to do a scroll without the user noticing. if can after that do a scroll top to zero after for him not to notice completly :)

With this "hack" it will make your elements be shown.

[Larzans]

I can confirm that the same issue is still present in the beta6, win 10, osx, safari, chrome

[Larzans]

In my case it was not a bug but due to the fact that i was waiting for the document.ready event to hook into the aos:in event, but obviously, when the document is ready it already has executed AOS.

So what you (at least I) have to do is put your event listeners OUTSIDE of the code that waits for document.ready and define it ASAP, in your case probably BEFOR the AOS.init() call.

You don't have to wait for AOS to be loaded / created because you can start listening to events before they are defined / exist, and while AOS is initializing it is apparently also executing the necessary animations of already visible elements!

See if that helps in your case to (would be good to provide an example of your problem to test it on that)

[mark-chief]

is this going to be fixed?

[HeavenlyEntity]

Merge this issue with mine and mark resolved.

If you have the AOS.init() function call in a plugin file or have it being declared before another JS library like slick or parallax you have to give AOS priority so make sure that function is declared in the outermost layer of the script tag in your html file. And the called last at the end of your js file as well to not be intertwined with any other obstacles causing glitches or bugs. If its simply in a plugin file cut it and paste it in its own file. Then last after the end of your </body> tag <script src="YourJSFile"></script> at the outermost layer.

[HeavenlyEntity]

is this going to be fixed?

AOS needs priority so make sure you are calling a IIF to make sure that there are no issues.

[mtpiercey]

This might not be the best answer, but I'll tell you what worked for me (using Nuxt.js):

TLDR:

Change startEvent to load and once to false

My Code

import Vue from 'vue'
import AOS from "aos"
import "aos/dist/aos.css"

Vue.use(AOS.init({
  disable: false,
+ startEvent: 'load',
  initClassName: 'aos-init',
  animatedClassName: 'aos-animate',
  useClassNames: false,
  disableMutationObserver: false,
  debounceDelay: 50,
  throttleDelay: 99,

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120,
  delay: 0,
  duration: 400,
  easing: 'ease-in-out-quad'
+ once: false,
  mirror: false,
  anchorPlacement: 'top-bottom'
}))

This way, any time I hit refresh, press the back button and land on a page, navigate to a page or load a page for the first time all the AOS elements spawn in correctly, even if they're in view when the page loads.

I'm assuming that the main drawback to this approach is that if you have a lot of AOS elements they basically have to be loaded in before the page is updated, so it's probably not optimal. But again, it works.

Thoughts?

[alexiscanasz]

no solution worked for me, i'm just creating a basic website the only library i have is AOS, nothing should interfere, someone could help me, please.

[cupok]

In my case it was not a bug but due to the fact that i was waiting for the document.ready event to hook into the aos:in event, but obviously, when the document is ready it already has executed AOS.

So what you (at least I) have to do is put your event listeners OUTSIDE of the code that waits for document.ready and define it ASAP, in your case probably BEFOR the AOS.init() call.

You don't have to wait for AOS to be loaded / created because you can start listening to events before they are defined / exist, and while AOS is initializing it is apparently also executing the necessary animations of already visible elements!

See if that helps in your case to (would be good to provide an example of your problem to test it on that)

U saved my day

[ahmedhbakr]

working after remove css class preloader

    <script>
      var overlayEvent = new CustomEvent("overlayLoaded");
      $(function () {
        $(".preloader").fadeOut(1000, function () {
          document.dispatchEvent(overlayEvent);
          $("body").removeClass("ovh");
        });

        AOS.init({
          startEvent: "overlayLoaded", // name of the event dispatched on the document, that AOS should initialize on
        });
      });
    </script>

[izzatullokanoatov]

This might not be the best answer, but I'll tell you what worked for me (using Nuxt.js):

TLDR:

Change startEvent to load and once to false

My Code

import Vue from 'vue'
import AOS from "aos"
import "aos/dist/aos.css"

Vue.use(AOS.init({
  disable: false,
+ startEvent: 'load',
  initClassName: 'aos-init',
  animatedClassName: 'aos-animate',
  useClassNames: false,
  disableMutationObserver: false,
  debounceDelay: 50,
  throttleDelay: 99,

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120,
  delay: 0,
  duration: 400,
  easing: 'ease-in-out-quad'
+ once: false,
  mirror: false,
  anchorPlacement: 'top-bottom'
}))

This way, any time I hit refresh, press the back button and land on a page, navigate to a page or load a page for the first time all the AOS elements spawn in correctly, even if they're in view when the page loads.

I'm assuming that the main drawback to this approach is that if you have a lot of AOS elements they basically have to be loaded in before the page is updated, so it's probably not optimal. But again, it works.

Thoughts?

Worked like a charm. Thanks

[ineptian]

Changing the startEvent to load fixed this for me. No need to update once.

[ghoshprithwi]

adding the following line in my js file solved the issue window.addEventListener('load', AOS.refresh());

[adt-mgpark]

I solved this with setTimeout because must use once: true.

setTimeout(function() {
    AOS.init({
        once: true,
    });
}, 100);

[olegovk]

If you explicitly add aos-init aos-animate css classes to an element, then this element will not animate if it is in viewport when the page loads.

This can happen for example if you copy code from browser developer tools.

Those classes are added to animated elements by AOS automatically.

[JackG102]

If you explicitly add aos-init aos-animate css classes to an element, then this element will not animate if it is in viewport when the page loads.

This can happen for example if you copy code from browser developer tools.

Those classes are added to animated elements by AOS automatically.

Thank you so much! This comment saved me so much debugging. I was tasked with redoing a page from React into a Drupal Twig template and had to scrape the HTML created by React. I had no idea that the AOS library added these classes after the animation (AOS was implemented prior to me coming on board with the project, so not familiar with it).

[hasenov]

In my case it was not a bug but due to the fact that i was waiting for the document.ready event to hook into the aos:in event, but obviously, when the document is ready it already has executed AOS.

So what you (at least I) have to do is put your event listeners OUTSIDE of the code that waits for document.ready and define it ASAP, in your case probably BEFOR the AOS.init() call.

You don't have to wait for AOS to be loaded / created because you can start listening to events before they are defined / exist, and while AOS is initializing it is apparently also executing the necessary animations of already visible elements!

See if that helps in your case to (would be good to provide an example of your problem to test it on that)

Thank you, worked like a charm, with newest version of AOS (v3 beta-6). It's better solution than changing startEvent to "load", because in that way it will take too long to start the animations.

[akrikorian85]

It's been a while. I'll close this issue as it looks like the fix is just to define event listeners before AOS.init(). Thank you all!