Css scroll snap compatibility

[seb-celinedesign]

This is:

• Bug

Specifications

• AOS version: 2.3.4
• OS: MacOS
• Browser: Chrome, Firefox and Safari 12.0

Expected Behavior

When i use the css scroll-snap-type: mandatory, aos-animate class must be added to the node

Actual Behavior

aos-animate class is NOT added to the node and animation are not triggered

Steps to Reproduce the Problem

1. Put this css on a container

   height: 100vh;
   overflow-y: scroll;
   scroll-snap-points-y: repeat(100vh);
   scroll-snap-destination: 0 0;
   scroll-snap-type: y mandatory;
   scroll-snap-type: mandatory;

   This css on child :

   scroll-snap-align: start;
   height: 100%;

2. Install aos

3. And add data-aos="fade-up" on the childs

4. AOS animation doesn't trigger

[huanyichuang]

Does anyone else know how to fix this issue? I'm facing the same problem as well. Is there any event to hook?

[Julianoe]

I have the exact same issue. Did anyone find a hack to fix or a real fix for this incompatibility? I have a codepen with this implemented that demonstrates the bug here: https://codepen.io/Julianoe/pen/PoqbWmm

This issue will soon be one year old. Anyone?

[vphilot]

having the same issue here, with no workaround so far.

[dlewand691]

Also just came across this issue.

[dlewand691]

This is working for me so far. It requires you to add .aos class to any element you're animating. It didn't seem to work with the .aos-init class, probably because that's added from the JS.

const aosAnimation = document.querySelectorAll('.aos');
observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('aos-animate');
    } else {
      entry.target.classList.remove('aos-animate');
    }
  });
});
aosAnimation.forEach(aosObject => {
  observer.observe(aosObject);
});

[Julianoe]

I'm not quite sure i'm understanding what you suggest. My code did not the .aos-init class to work to activate the animations on scroll. But once i add the scroll snap. Still not working :( I added the .aos class in my code but it does not change anything. Would you mind giving a fork of that codepen? Are you using AOS v2 ?

[saoud-ahmed-khan]

facing the same issue.. does any one find out the solution?

[evibreukers]

const aosAnimation = document.querySelectorAll('.aos'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });

This works! however data-aos-offset is not working anymore. do you also know how to fix this?

[imshuffling]

Having the same issue here. Anyone manage to resolve it? Using it with Gatsby.js

[imshuffling]

In the end I used the fullpage.js library which got the scrolljack effect.

[shivamsaksham]

having same issue .. i thought it may be because of using library so i tried getting scroll position , but not even getting the scroll position and also this function is not executing

document.body.onscroll = function (e) { var position = window.scrollY; console.log(position); }

Someone help!!

[cdcdianne]

Also having the same issue. does anyone have already a fix for this? huhu :(

[rajilesh]

Added this and worked.

const aosAnimation = document.querySelectorAll('[data-aos]');
observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('aos-animate');
    } else {
      entry.target.classList.remove('aos-animate');
    }
  });
});
aosAnimation.forEach(aosObject => {
  observer.observe(aosObject);
});

[tohirul]

where to import the observer from on the solution in this sorry for being ignorant I am really new to this if someone please reply

const aosAnimation = document.querySelectorAll('[data-aos]'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });

[tohirul]

Along with the code add the className in the tag of aos effect "aos-init aos-animate" these to tags on className and attach the code snippet is below in the component they should work on any project

const aosAnimation = document.querySelectorAll('[data-aos]'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });

[Gokul1995]

aos doesnot work with overflow-y: scroll; property. If you want to use overflow property you need to refresh AOS on scroll of the window event, which can be triggered as

document.addEventListener('scroll', (event) => { AOS.refresh();}, {capture: true, passive: true,})

Note to pass capture property else event will not triggred on oveflow property.

[Csimpson]

This codepen worked fine for me. No other code needed.... https://codepen.io/fatty1996/pen/NWPjMdq

[PiyushAgrawal1243]

Hii guys ,

i have found the solution . document.addEventListener('scroll', (event) => { const aosAnimation = document.querySelectorAll('[data-aos]'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });}, {capture: true, passive: true,})

try this.

paste it in index.html in script tag before

[pratik-adh]

import { useEffect, useRef } from "react";

const useAOSWithScrollSnap = () => {
  useEffect(() => {
    const aosAnimation = document.querySelectorAll("[data-aos]");

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("aos-animate");
          } else {
            entry.target.classList.remove("aos-animate");
          }
        });
      },
      { threshold: 0.5 },
    ); // Adjust threshold as needed

    aosAnimation.forEach((aosObject) => {
      observer.observe(aosObject);
    });

    // Cleanup observer on component unmount
    return () => {
      observer.disconnect();
    };
  }, []);
};
export { useAOSWithScrollSnap };

and import useAOSWithScrollSnap hook into your component