not working correctly with Next.js 13.4.19

[R3ps4k]

After upgrading project to newest release of nextjs everything stopped working. Not a single element with aos property got rendered (animation was not triggered).

Downgrading it back to 13.4.6 solved the issue

This is:

• Bug

Specifications

• AOS version: 2.3.4
• OS: Windows/linux
• Browser: chrome, edge, firefox

Expected Behavior

Animations should be triggered

Actual Behavior

not a single animation was triggered resulting in unusable website

Steps to Reproduce the Problem

1. setup nextjs project and add aos
2. Initialize aos with AOS.init
3. add any animation to site element
4. result - element is not visible on the site

Detailed Description

Possible Solution

[DanielOberlechner]

NextJS version 13.5 was released short time ago. Does this behaviour still exist on the newest NextJS Version?
In my opinion it could be a NextJS bug maybe?

[jsvelte]

I faced the same issue in next.js version 13+ and I did correctly the installation and It didn't work properly on my end!

[DanielOberlechner]

I personally shifted from AOS to animejs which is a far better library to also a bit more complex ... maybe that would be a solution for both of you? :)

Keep in mind last commit was October 2018 ...

[jsvelte]

I fixed my issue please refer here shadcn-ui/ui#1745

[bdhamithkumara]

same issue in next.js 14.0.4

[ABCodez]

A solution that worked for me was adding a slight delay in initializing AOS (Next.js 14.1.0):

[Harukisatoh]

In my case the problem was that all the images were by default lazy loaded. To solve the issue I had to create an Image component that refreshed the AOS as soon as the image finished loading, and then I used this component across the app instead of the next/image one.

This is the piece of code that I used:

"use client";

import AOS from "aos";
import ImageComponent, { ImageProps } from "next/image";

export function Image(props: ImageProps) {
  return (
    <ImageComponent
      {...props}
      onLoad={() => AOS.refresh()}
    />
  )
}