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

[meko-deng]

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]

Did you solve your issue ? Could you help me set up AOS in next.js ?

[Mitesh13]

Same issue

[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

[ariq2901]

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

Thanks @EgamoPi , It Work successfully 🔥

[yogesh-bitontree]

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

[zeghmouri]

It works perfectly for me That's how I am configuring my _app.js : IMPORTS :

import AOS from 'aos';
import 'aos/dist/aos.css';
import { useEffect } from 'react'

AOS INIT

useEffect(() => {
    AOS.init({
        delay: 400,
        duration: 800,
    });
});

In development environment : Every time I add data-aos attributes to elements, I have to hard reload the tab in the browser to get the changes work ( I think it is due to the caching of css files ).

In production It works perfectly. I hope that this will help you.

[NitinHirve]

Can anyone help me with this? I'm using NEXT js + AOS, facing the same issue. But animations are working on the latest browsers of Chrome, Firefox, and Safari. But for some old versions of the browser, elements in view on load are properly animated, the rest of my elements do not get the AOS animations and they get disappear. Only the elements which have no AOS animations are visible on the scroll

[zeghmouri]

Can anyone help me with this? I'm using NEXT js + AOS, facing the same issue. But animations are working on the latest browsers of Chrome, Firefox, and Safari. But for some old versions of the browser, elements in view on load are properly animated, the rest of my elements do not get the AOS animations and they get disappear. Only the elements which have no AOS animations are visible on the scroll

Hello @NitinHirve Please make sure to set data-aos-duration and data-aos-delay attributes for every component. Or you can just do this globally in _app.js file as I mentioned in my previous response above.

[NitinHirve]

Hi @zeghmouri I tried the below code in _app.js but still facing the same issue

useEffect(() => { Aos.init({delay:400 ,duration: 1300}); })

[FrontendSrdt]

I have tried to apply it inside the nested component, which is not working : the main class is not being added "aos-animate".

``` ``` |--- |----- |----- when this comment everything is fine |----- (add here ) it's not working until I comment on the above component ``` ``` any reply and solution would be very grateful : PS: I am using react-router dom v-6 .