Next.js and AOS: Effortless Scroll-Based Animations

In today's web development landscape, adding engaging animations to your website can greatly enhance the user experience. Animate on Scroll (AOS) is a popular JavaScript library that allows you to animate elements as they come into view while scrolling. In this tutorial, we will explore how to integrate the AOS library with Next.js, a powerful React framework for building server-rendered applications.

Step 1: Setting Up a Next.js Project

Before we dive into using the AOS library, we need to set up a basic Next.js project. If you already have a project, you can skip this step. Otherwise, follow the official Next.js documentation to create a new Next.js project using the command-line interface.

Step 2: Install and Configure AOS

Once you have a Next.js project set up, navigate to the project's root directory in your terminal. To install the AOS library, use the following command:

npm install aos --save

This will install the AOS library and save it as a dependency in your project's package.json file.

Step 3: Import and Initialize AOS

Next, open the _app.js file located in the pages directory of your Next.js project. This file is responsible for initializing global components and libraries. Import the AOS library and initialize it by adding the following code:

import { React, useEffect } from 'react'
import AOS from 'aos';
import 'aos/dist/aos.css';
function App({ Component, pageProps }) {
 useEffect(() => {
     AOS.init({
          duration: 800,
          once: false,
        })
  }, [])
  return <Component {...pageProps} />;
}
export default MyApp;

Here, we import the AOS object from the AOS library and the associated CSS file. We then use the useEffect hook to initialize AOS when the application mounts. By passing an empty dependency array ([]), we ensure that AOS is only initialized once.

Step 4: Adding AOS Animations

Now that AOS is set up, we can start adding animations to our components. Open a component file (e.g., index.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, we apply the fade-up animation to the <div> element using the data-aos attribute. You can explore various animation options provided by the AOS library in its documentation.

Step 5: Customizing AOS Animations

AOS provides several customization options to control the animation behavior. You can customize the animation duration, delay, offset, and more. Refer to the AOS documentation for detailed information on customization.

Note :If you are using class components, import the AOS library and initialize it within 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();
  }
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}
export default MyApp;

Conclusion

By combining the power of Next.js and the Animate on Scroll (AOS) library, you can effortlessly create captivating animations on your website. In this tutorial, we walked through the process of integrating AOS with a Next.js project. Remember to experiment with different animations and customize them to suit your website's aesthetics. Happy animating!