Next.js and AOS: Easy Scroll Animations for Your Website

Introduction

In today’s web development landscape, animations play a vital role in enhancing user experience. Animate on Scroll (AOS) is a powerful JavaScript library that lets you easily animate elements as they scroll into view. In this tutorial, we’ll show you how to integrate AOS with Next.js, a React-based framework for building server-rendered applications.

Let’s dive in and learn how to add eye-catching scroll animations to your Next.js website.

Step 1: Setting Up a Next.js Project

If you don’t already have a Next.js project, follow the Next.js documentation to create one. You can initialize a new project using the following command:

npx create-next-app@latest my-next-app
cd my-next-app

For existing projects, skip this step and move to the next section.

Step 2: Installing AOS

To use AOS in your project, you need to install it as a dependency. Navigate to your project directory and run the following command:

npm install aos --save

This will install the AOS library and add it to your package.json.

Step 3: Importing and Initializing AOS

To initialize AOS, open the _app.js file located in the pages directory. This file handles global configurations for your application. Add the following code:

// _app.js
import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";
 
function MyApp({ Component, pageProps }) {
  useEffect(() => {
    AOS.init({
      duration: 800, // Animation duration in milliseconds
      once: false, // Whether animation should happen only once
    });
  }, []);
 
  return <Component {...pageProps} />;
}
 
export default MyApp;

Key Points:

1. The AOS.init method initializes the library with custom options such as duration and once.
2. The useEffect hook ensures that AOS initializes only when the app mounts.

Step 4: Adding AOS Animations to Components

With AOS set up, you can start adding animations to your components. Use the data-aos attribute to specify the animation type. For example:

// MyComponent.js
function MyComponent() {
  return (
    <div data-aos="fade-up">
      <h1>Animate on Scroll Example</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  );
}
 
export default MyComponent;

In this example:

• The fade-up animation is applied to the <div> element.
• AOS automatically triggers the animation as the element scrolls into view.

Step 5: Customizing AOS Animations

The AOS library provides extensive customization options. You can control animations using additional data-aos-* attributes such as:

• data-aos-duration: Adjust the animation duration (in milliseconds).
• data-aos-delay: Set a delay before the animation starts.
• data-aos-offset: Customize the offset (distance from the viewport) at which the animation triggers. Example:

<div data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">
  <h2>Customized Animation</h2>
</div>

Explore the AOS documentation for a full list of supported animations and attributes.

Step 6: Using AOS with Class Components

If your project uses class-based components, initialize AOS in the componentDidMount lifecycle method:

import AOS from "aos";
import "aos/dist/aos.css";
import React from "react";
 
class MyApp extends React.Component {
  componentDidMount() {
    AOS.init({
      duration: 800,
      once: true,
    });
  }
 
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}
 
export default MyApp;

Conclusion

By integrating Next.js with the Animate on Scroll (AOS) library, you can effortlessly add dynamic, scroll-based animations to your website. In this guide, we covered everything from installing AOS to customizing animations for your project.

Experiment with different animations and tweak the settings to match your website’s design. With AOS, you can create engaging and interactive user experiences that leave a lasting impression.

Happy animating!

Additional Resources

• Next.js Documentation
• AOS Documentation
• GitHub Repository: AOS