Aos: How to mix AOS and Next.js ?

Created on 23 Apr 2020 · 8Comments · Source: michalsnik/aos

This is:

Question

Specifications

AOS version: last
OS: Windows 10
Browser: Chrome

Expected Behavior

Animation working directly

Actual Behavior

Animation works only when I open the dev console (I think it's because it's SSR)

Steps to Reproduce the Problem

2.
3.

Detailed Description

Possible Solution

Source

hamze10

👍1

Most helpful comment

adding something like this in pages/_app.js works for me:

import { useEffect } from "react";
import AOS from "aos";

import "aos/dist/aos.css";
import "../scss/style.scss";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    AOS.init({
      easing: "ease-out-cubic",
      once: true,
      offset: 50,
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

knowbody on 12 Oct 2020

❤4 👍2

All 8 comments

Having same issues.
It only works on dev environment and doesn't display anything in production

DNature on 15 Jun 2020

How did you guys get it to work (even in dev) with NextJs?

I get the initial load animation, but nothing happens on scroll. When i inspect my elements, the aos-init class is added, but aos-animate isn't being added on scroll.

meko-deng on 6 Aug 2020

How did you guys get it to work (even in dev) with NextJs?

I get the initial load animation, but nothing happens on scroll. When i inspect my elements, the aos-init class is added, but aos-animate isn't being added on scroll.

When page is loaded, just open the devtools and close it. It should make the scroll work.

hamze10 on 6 Aug 2020

Where and when are you initializing aos? Try initializing aos in an effect in _app.js.

Royceb on 25 Sep 2020

Up!
Hi guys, I am also trying to integrate AOS with next js.
-J

EgamoPi on 3 Oct 2020

adding something like this in pages/_app.js works for me:

import { useEffect } from "react";
import AOS from "aos";

import "aos/dist/aos.css";
import "../scss/style.scss";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    AOS.init({
      easing: "ease-out-cubic",
      once: true,
      offset: 50,
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

knowbody on 12 Oct 2020

❤4 👍2

@knowbody I'll try to implement it tomorrow and I will let you know how it goes. Does is also work in production ?

EgamoPi on 14 Oct 2020

@knowbody thank you, works perfectly. I think we can close this issue.

EgamoPi on 29 Oct 2020

👍2 ❤1

Was this page helpful?

0 / 5 - 0 ratings