'aos:in' and 'aos:out' events do not work

[samgevorgyan]

Hello

I had a project which was written with angular 8. Recently I updated it to angular 11 and after that, the 'aos:in' and 'aos:out' events do not work. I updated the aos.js itself but did not help. I used "https://samuelweber.at/aos/dist/aos.js" but again no result.

window.addEventListener('aos:in', () => { console.log('I am aos:in'); }); and window.addEventListener('aos:out', () => { console.log('I am aos:out'); });

thanks in advance

[artziom]

Hi, 10 minutes ago, I solved the same problem in my project. It turned out that I was using the last stable version (v2: https://github.com/michalsnik/aos/tree/v2) that doesn't seem to have this functionality. I can't even find it in this version of the documentation.

The solution in my case was to remove this version and add a new one (next / v3: https://github.com/michalsnik/aos/tree/next) to my dependencies using a command: yarn add aos@next, but this one is beta and I don't know yet if it's stable enough.

Long story short, I have not checked for which library version I am reading documentation on github. It turns out that https://michalsnik.github.io/aos/ describes v2, but link to github redirect us to v3 and that's what confused me.

[aanders50]

Hi, 10 minutes ago, I solved the same problem in my project. It turned out that I was using the last stable version (v2: https://github.com/michalsnik/aos/tree/v2) that doesn't seem to have this functionality. I can't even find it in this version of the documentation.

The solution in my case was to remove this version and add a new one (next / v3: https://github.com/michalsnik/aos/tree/next) to my dependencies using a command: yarn add aos@next, but this one is beta and I don't know yet if it's stable enough.

Long story short, I have not checked for which library version I am reading documentation on github. It turns out that https://michalsnik.github.io/aos/ describes v2, but link to github redirect us to v3 and that's what confused me.

Hi! Just to clarify, so essentially you removed the aos 2.x references and replaced them with the aos@next references? When I do this, the animations are little buggy, but I might just need to re-configure some stuff. Just wanted to verify if this what you meant by your comment. I.E.

<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

to

<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Thank you!

[artziom]

Hi, 10 minutes ago, I solved the same problem in my project. It turned out that I was using the last stable version (v2: https://github.com/michalsnik/aos/tree/v2) that doesn't seem to have this functionality. I can't even find it in this version of the documentation. The solution in my case was to remove this version and add a new one (next / v3: https://github.com/michalsnik/aos/tree/next) to my dependencies using a command: yarn add aos@next, but this one is beta and I don't know yet if it's stable enough. Long story short, I have not checked for which library version I am reading documentation on github. It turns out that https://michalsnik.github.io/aos/ describes v2, but link to github redirect us to v3 and that's what confused me.

Hi! Just to clarify, so essentially you removed the aos 2.x references and replaced them with the aos@next references? When I do this, the animations are little buggy, but I might just need to re-configure some stuff. Just wanted to verify if this what you meant by your comment. I.E.

<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

to

<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Thank you!

Yes, that's exactly what I did, except that I used the package manager for it.

[Rod911]

https://cdnjs.com/libraries/aos/3.0.0-beta.6 if you're looking for a cdnjs link

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/3.0.0-beta.6/aos.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/3.0.0-beta.6/aos.css" />