AOS does not detect element in viewport if they're in a transformed div instead of classic body scrolling

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

1. Setup a basic site with a locomotive scroll container
2. Create a 100vh div
3. 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:

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.