You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to use AOS in addition with Locomotive Scroll.
It looks like the AOS script is not detecting element in the viewport because they're all located in a div that is transformed. (Locomotive Scroll smooth scroll behavior)
This is:
Bug
Specifications
AOS version: 2.3.2
OS: Windows
Browser: Chrome
Expected Behavior
Elements having the data-aos attribute should be animated when they enter the viewport.
Actual Behavior
AOS does not detect elements in the viewport.
Steps to Reproduce the Problem
Setup a basic site with a locomotive scroll container
Create a 100vh div
Create a second div that have an AOS animation
Detailed Description
I didn't dig too much into the AOS script code, but I suspect you use elements offset positions to calculate when it enters the viewport.
Possible Solution
I don't have a solution right now but I have an ugly fix.
In my project I don't include the AOS javascript anymore and only use this:
Now the animations are played. I think using my script will break a lot of AOS attributes functions but that's the only way I found so far to make it works in my case.
The text was updated successfully, but these errors were encountered:
@MathieuTristan82 I think I found a better variant of your JavaScript fix:
let observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { Aos.refresh(); } }); }); document.querySelectorAll('[data-aos]').forEach((aosElem) => { observer.observe(aosElem); });
This way, it will not break the attributes.
😉 For all future users, there's now an NPM package which uses the code above to solve this issue by making an alternative AOS Initialiser -> https://www.npmjs.com/package/locomotive-aos
Works in exactly the same way, here's how you could use it in NextJS with React:
I'm trying to use AOS in addition with Locomotive Scroll.
It looks like the AOS script is not detecting element in the viewport because they're all located in a div that is transformed. (Locomotive Scroll smooth scroll behavior)
This is:
Specifications
Expected Behavior
Elements having the data-aos attribute should be animated when they enter the viewport.
Actual Behavior
AOS does not detect elements in the viewport.
Steps to Reproduce the Problem
Detailed Description
I didn't dig too much into the AOS script code, but I suspect you use elements offset positions to calculate when it enters the viewport.
Possible Solution
I don't have a solution right now but I have an ugly fix.
In my project I don't include the AOS javascript anymore and only use this:
let observer = new IntersectionObserver( (entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('aos-animate'); }else{ entry.target.classList.remove('aos-animate'); } }); }); document.querySelectorAll('[data-aos]').forEach(aosElem => { observer.observe(aosElem) });
Now the animations are played. I think using my script will break a lot of AOS attributes functions but that's the only way I found so far to make it works in my case.
The text was updated successfully, but these errors were encountered: