A Beginner's Guide to Using AOS Library with Next.js application

Table of contents

• What is AOS?
• Why is use AOS?
• How to use AOS?
• Conclusion

What is AOS?

AOS stands for Animation on Scroll. It is a Javascript library that allows you to make a beautiful animation when a page is scrolled down or up on your website.

AOS library will help to enhance the visual appeal of your website with various types of animation such as fade-ins, and zoom-ins, ...

Why is use AOS?

Some benefits when using the AOS library:

• Easy to use: only adding data attributes to the element.
• Customization: having more options such as duration, delay, easing, and offset.
• Compatibility: working consistently across different platforms and devices.
• Lightweight: minimizing the impact on page load times and ensuring smooth animation effects.

How to use AOS?

Using the AOS (Animate on Scroll) library with a Next.js application is relatively straightforward.

Before setting up AOS in your project, I would like to introduce AOS attributes:

• data-aos: The animation type (e.g., fade-up, fade-right, etc.)
• data-aos-easing: Speed curve of the animation.
• data-aos-duration: How long the animation effect lasts (in milliseconds).
• data-aos-offset: Adjusts the animation trigger point.
• data-aos-delay: Adds a delay before the animation starts.

Below is a beginner's guide to get you started:

Step 1: Install AOS

First, install the AOS library in your Next.js project.

yarn add aos

Step 2: Import AOS and Initialize

In your Next.js project, you'll need to import AOS and initialize it.

// pages/_app.ts

import { useEffect } from 'react';

import AOS from 'aos';
import 'aos/dist/aos.css';

const App = ({ children }) => {
  useEffect(() => {
    AOS.init({
      // Global settings here
    });
  }, []);

  return (
    <div>
      {children}
    </div>
  );
};

export default App;

Step 3: Use AOS in Your Components

Now that AOS is initialized, you can use it in your components by adding AOS data attributes to the elements you want to animate:

// components/FadeUp.ts

import React from 'react';

const FadeUp = () => {
  return (
    <div data-aos="fade-up">
      Content to animate
    </div>
  );
};

export default FadeUp;

Step 4: Start Your Next.js Application

Finally, start your Next.js application and test the AOS animations on scroll.

Conclusion

Overall, AOS is a useful tool for web developers and designers looking to add scroll-based animations to their websites without the need for complex coding or external libraries.

I hope this article gives more benefits to you.

Document references:

• https://michalsnik.github.io/aos/