classes `aos-animate` not being applied (NextJs)

I’m working with NextJs and the aos-init classes on my elements are applied and only the elements in view on load are properly animated. The rest of my elements do not get the aos-animate class applied on scroll. There seems to be some kind of interference with the scroll listeners. Help!

This is:

• Bug

Specifications

• AOS version:
• OS: MacOS
• Browser: Chrome

Expected Behavior

aos-animate class being applied on scroll

Actual Behavior

aos-animate class not being applied on scroll. Only on load on elements in the viewport.

Steps to Reproduce the Problem

N/A

Detailed Description

• aos-init classes are being applied
• aos-animate classes are only being applied on load to the elements in the viewport
• aos-animate classes are not being applied on scroll

One solution I’ve tried so far is manually adding an event listener and triggering AOS.refresh() but the animation isn’t smooth and does not work as well as how it should behave (also a very sketchy patch)

  useEffect(() => {
    AOS.init({
      duration: 700,
      delay: 50,
      once: true,
    })
    window.addEventListener('touchmove', () => {
      AOS.refresh()
    }, false)
  })

Thanks!

[EgamoPi]

Same issue

Check my repo “Aos-implementation”, check how I configured _app.js and how I am using aos in the sectionOne.js for example (In the component folder) for example. Working out of the box on Safari, Chrome, Firefox, DuckDuckGo.

Here you can have a quick look to see that it’s working, and animation gets reset every time you scroll back up :

aos-implementation-git-main.egamopi.vercel.app

[yogesh-bitontree]

Do we have any fix for this issue? anyone’s reply will be helpful. Thank you!