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

[MathieuTristan82]

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.

[Sm0ove]

@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.

[Nitlix]

😉 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:

"use client"
import "./Aos.scss"
import Aos from "locomotive-aos";
import {
    useEffect
} from "react";

export default function () {
    useEffect(() => {
        Aos.init({
            duration: 1000,
            easing: "ease-in-out"
        })
    }, [])


    return <></>
}