How to Use AOS.js in Next.js: Elevate Your User Experience with Eye-Catching Animations

Photo Fly:D at Unsplash

Since its introduction, Next.js has won the hearts of developers worldwide for its ease of use, scalability, and flexibility in building both static websites and dynamic applications. While Next.js is popularly known for creating fast and user-friendly web applications, what makes a web application stand out is its interaction design. And animations play a crucial role in enhancing this interaction.

As a web developer, there are many factors you consider when creating an immersive and engaging user experience. The interactive aesthetics of a website, for example, are critical in leaving lasting impressions on users. One powerful tool to achieve this effect is the clever use of animations.

AOS (Animate on Scroll) is one such library that developers use extensively to add beautiful animations to a webpage. This library is not only lightweight and easy to use, but it also supports a variety of animations. The best part? You can control when an animation starts. Animations initiate when you scroll to a certain point of the webpage, thereby ensuring a smooth user experience.

Brief Overview of AOS.js and Next.js

AOS.js is a lightweight JavaScript library that adds a dash of interactivity to your webpage with beautiful animations. It provides a slew of animations that are triggered as soon as an element enters the viewport.

Next.js, on the other hand, is a robust framework that allows developers to create both static websites and dynamic applications with ease. Its versatility and scalability have made it widespread adoption among developers.

marikhsalatiga.com and arisansecurity.id are my latest project where I had an opportunity to leverage the power of Next.js and Aos.js. I chose Next.js for its speed, SEO-friendliness, and server-side rendering capabilities. If you’re new to Next.js, setting it up is quite a breeze.

Setting Up Next.js

Before we dive into integrating AOS.js into a Next.js application, we need to set up a basic Next.js application. If you already have one, feel free to skip this part.

To set up a new Next.js project, you will need Node.js installed in your system. Use the following command:

npx create-next-app@latest

Next, you’ll be prompted to name your project and its configurations. Once you’ve done that, the installation will proceed.

Installing AOS

Once you have your Next.js project set up, navigate to your project’s root directory and install AOS using either npm or Yarn:

npm install aos --save

or

yarn add aos

Using AOS in Next.js

Now that you have AOS installed in your project, you can start using it in your components. There are three main steps to follow to animate an element:

1. Import AOS: At the top of your JavaScript or JSX file, import the AOS module and its CSS (you can do this in _app.js or only on desired pages).

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles

2. Initialize AOS: AOS needs to be initialized before it can be used. Warning: to prevent server-side errors, the best place to do this is usually in the componentDidMount lifecycle method for class components or the useEffect hook for functional components. In a Next.js application, you would typically do this in your _app.jsfile or in the desired pages.

3. Specify AOS attributes: The final step is to specify what animations to use for which elements. This is done by adding data-aos attributes to the HTML elements that you want to animate.

<div data-aos="fade-up">
    I will fade up
</div>

You can customize the animations further using additional data-aos-* attributes. For example, to make an element fade in and move up 100 pixels over 3 seconds, and delay the animation until the user has scrolled halfway down the viewport, you could do:

<div data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="3000">:D</div>

The Impact of AOS.js on your pages

Implementing AOS.js in your pages was more than just adding visual flair. It helped increase the overall user engagement and enhanced the browsing experience. The scroll-triggered animations provided a dynamic feel to the landing page, making the user interactions more immersive. It truly enriched the user journey from start to end, resulting in a longer stay on the webpage and higher user satisfaction.

AOS.js is lightweight, easy to use, and supports a wide range of animations. Its simplicity and effectiveness in providing beautiful on-scroll animations.

Wrapping Up

My experience with marikhsalatiga.com and arisansecurity.id was quite enlightening. It taught me how animations, when used properly, can transform the entire user experience of a website. And the combination of Next.js and AOS.js made this task easier and more enjoyable.

I highly recommend trying out AOS.js in your Next.js projects. Its ease of use and the array of animations it offers can help bring your user interface to life. Whether you’re creating a business website, a portfolio, or a landing page like marikhsalatiga.com and arisansecurity.id, AOS.js can be a great tool to enhance user experience.

Remember, animations aren’t just about making your website look cool. They can be used effectively to guide users’ attention, provide feedback, show progress, and make the overall interaction with your site more enjoyable. So go ahead, experiment with animations, and create memorable experiences for your users!