Css scroll snap compatibility

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%;

1. Install aos
2. And add data-aos=“fade-up” on the childs
3. AOS animation doesn’t trigger

[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);
});

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