search

michalsnik / aos

Animate on scroll library
MIT License
26.76k stars 2.59k forks source link

not working correctly with Next.js 13.4.19 #834

Open R3ps4k opened 1 year ago

R3ps4k commented 1 year ago

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:

Specifications

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

I fixed my issue please refer here https://github.com/shadcn-ui/ui/issues/1745

bdhamithkumara commented 8 months ago

same issue in next.js 14.0.4

ABCodez commented 7 months ago

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

Harukisatoh commented 3 months ago

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()}
    />
  )
}