Animation not working after loading page, but works when I inspect the page.

[jcsdesterke]

This is:

• Question

Specifications

• AOS version:3.0.0-beta.6
• OS: MacOS
• Browser: Google Chrome

Expected Behavior

The element I apply a data-aos tag to should appear animated when I load the page or when I scroll over it.

Actual Behavior

The elements with the data-aos tag are hidden and not visible when I load the page or scroll over it. But when I open DevTools they start appearing.

Steps to Reproduce the Problem

N/A

[maganius]

I have the same issue, I just install the library with NPM (i use laravel mix) and this only works correctly on the first element found. If I open the devtools bar the others elements start appearing.

[Sandstedt]

@jcsdesterke @maganius Do they trigger if you resize the window too instead of opening the dev tool? Because I think the reason it works when you open the dev tools is that it triggers a viewport change, that does something internally in AOS to make it work.

I have a similar problem myself on one place at the site where the aos data attribute is deep in the DOM structure with a lot of margin and padding surrounding those elements. But also has problems when viewing the site on a large monitor.

[maganius]

@Sandstedt yes, if I resize the window it work, any way to emulate resize or force the event to get it work? any hard-fix is welcome for now.

[Sandstedt]

Doesn't seem like a good solution. Maybe you could inspect the source code and find the bug yourself?

Me myself went with a intersectionObserver API solution instead. Worked fine for my project.

[jcsdesterke]

Tried using npm source instead of CDN. still getting the same result. After applying the data-aos tag on multiple elements, only the first one appears.

[maganius]

@Sandstedt I never fork a js project, where I can see a guide to fork and try fix this repo?, I know how fork but I dont know how compilate the js to test.

[Sandstedt]

@maganius There is usually always a CONTRIBUTING.md file in all open source projects with instructions how to get it going. Here is the file for v2: https://github.com/michalsnik/aos/blob/v2/CONTRIBUTING.md and here for the non production ready next version: https://github.com/michalsnik/aos/blob/next/CONTRIBUTING.md

But this project seems to have stalled. Last commit was for 2 years ago. So don't expect the setup to work smoothly. I would suggest using another library or coding your own with Intersection Observer API. You can find resources on MDN about it here.

I could also provide a gist (small code snippet) of how I used it if that's interesting?

[DevKhris]

AOS is a good library for some small-medium things even in it's complex way, but it fails when you reach certain point of escalibility with php model of views or when using more defined frameworks like laravel or cakephp even on .net have some implementation issues, most of the times you have to do your own library for this or using ES6+SASS to acomplish the same on the short way in most cases.

[maganius]

@maganius There is usually always a CONTRIBUTING.md file in all open source projects with instructions how to get it going. Here is the file for v2: https://github.com/michalsnik/aos/blob/v2/CONTRIBUTING.md and here for the non production ready next version: https://github.com/michalsnik/aos/blob/next/CONTRIBUTING.md

But this project seems to have stalled. Last commit was for 2 years ago. So don't expect the setup to work smoothly. I would suggest using another library or coding your own with Intersection Observer API. You can find resources on MDN about it here.

I could also provide a gist (small code snippet) of how I used it if that's interesting?

I tried without luck,

gyp ERR! build error gyp ERR! stack Error: make failed with exit code: 2 gyp ERR! stack at ChildProcess.onExit (/home/hansz/web/aos/node_modules/node-gyp/lib/build.js:258:23) gyp ERR! stack at ChildProcess.emit (events.js:314:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12) gyp ERR! System Linux 4.9.0-13-amd64 gyp ERR! command "/home/hansz/.nvm/versions/node/v14.8.0/bin/node" "/home/hansz/web/aos/node_modules/node-gyp/bin/node-g yp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd /home/hansz/web/aos/node_modules/node-sass gyp ERR! node -v v14.8.0 gyp ERR! node-gyp -v v3.6.2 gyp ERR! not ok Build failed with error code: 1

I dont know how I can fix that but now I will need find another library.

thanks you @Sandstedt

[Sandstedt]

@maganius Sounds like a problem with your Node setup.

But if you wanna try, I have a gist using the standard Intersection Observer API here you can use: https://gist.github.com/Sandstedt/74cb4c5da096e1a8b65147ee56e5886c

And a demo here: https://codesandbox.io/s/fully-reveal-jr4u5?file=/src/FullyReveal.js

[hocomadvies]

@maganius Sounds like a problem with your Node setup.

But if you wanna try, I have a gist using the standard Intersection Observer API here you can use: https://gist.github.com/Sandstedt/74cb4c5da096e1a8b65147ee56e5886c

And a demo here: https://codesandbox.io/s/fully-reveal-jr4u5?file=/src/FullyReveal.js

I have more or less the same problem. https://github.com/michalsnik/aos/issues/635

Is your solution with Intersection Observer an additional js on top of the Aos.js or in fact replacing it? As a bit of noob at this matter, can I just kick in the js you have in the gist.github or do I need some more to use that?

[Sandstedt]

@hocomadvies It just a standard JavaScript api that I'm using. You can read more about in on MDN.

So no it doesn't have anything to do with AOS. It's just that this API didn't exist, or that the Browser usage adoption was to low to be used in production, when AOS was build.

If you look in the demo or on the gist there is instructions how to use my solution. But would suggest reading the spec and wrap your head around it yourself.

[veeri]

use startEvent: 'load' in AOS.init({}), it will add event listener on window instead of document.

[Tiago-Rodrigs]

I had the same issue. I'm using React js for a frontend project. I realize that I only initilize the library in the page /home, so whenever I go to /about page, I get a white screen. My solution was to initilize the library also in about page.

[akashkumar-nickelfox]

Hey, it is not working when, I land on particular page very first but when i reload this page it is start working so can you suggest me why this happening with me

[AzimovParviz]

Hey, it is not working when, I land on particular page very first but when i reload this page it is start working so can you suggest me why this happening with me

replying in case anyone else is interested in this. This might be cased by not initiating and importing aos in the App.js

[Ahelsamahy]

@AzimovParviz added it before </body> as mentioned here also in my main.js with function that runs when the document starts

$(document).ready(function () {
window.addEventListener('load', AOS.refresh());
}

still doesn't work when I load the site for first time (after deleting cache), I have to load it again so it works

[ThomasHenrissat]

I was having a similar issue, the animations would not play unless the page was resized.

I believe the issue is that the page isn't fully loaded when oas.init() is being called, so it fails to select the element tagged with the data-attribute.

To make sure that wouldn't happen I did the following:

window.addEventListener('load', () => {
    aos.init();
});

Now oas.init() will only be called when the page is fully loaded, and the animations work as expected.

[aliceheiman]

I did this and it worked:

import AOS from "aos";
import "aos/dist/aos.css";

// init AOS animation
window.addEventListener("load", () => {
    AOS.init({
        duration: 1000,
        offset: 100,
    });
});

[Ben-eg]

In my case, the issue arises when using a slider with animated elements positioned based on that slider. AOS detects the element to animate lower than it actually is because the slider items load in a column before repositioning themselves in a row to slide horizontally. Simply giving a fixed height to the slider, not just the item, resolves this. The animated element is correctly positioned upon page load, and the animation starts as intended.

[Batuhanbyr]

If someone else encounters the same issue, they can try resolving it by running npm run dev in the terminal. if u are using npm offcourse :)