How to Implement Animate on Scroll in Angular Web Apps - Using the AOS Library

Introduction

Animations pique a user's interest in applications. Not only that, animations can also be used to improve UX(user experience) considering the fact that making dramatic transitions and movements on the screen can be a way to retain a user’s attention while the content of a page loads . In this article, we’ll go over how to use the Animate On Scroll (AOS) library to animate Angular web pages.

Learning Objectives

At the end of this article, you would have learned how to:

• Install and configure the Animate On Scroll Library
• Initialize and animate web pages in Angular applications.

Prerequisites

To get the most out of this tutorial, a basic understanding of the following is required;

• HTML
• CSS
• Angular
• Typescript

Let's get started by going over the step-by-step process to
achieve the learning objectives of this tutorial.

1. Setting up/installing an Angular app.

An angular app must be running before we begin at all. This can be accomplished by executing the following sequence of commands:

ng new my-app

 // ? Would you like to add Angular routing? Yes
 // ? Which stylesheet format would you like to use? CSS

All of our routing configuration would need to be defined in
our
angular project's app-routing.module.ts file. Angular CLI
will add the app-routing.module.ts file to our Angular
project if we answer "YES" to the question "Would you like
to add Angular routing?".

cd myApp

This would change our directory to myApp folder.

ng serve --o

This would serve and open our Angular project on http://localhost:4200 by default. This way we can now view our project.

2. Configuring/installing the Animate On Scroll (AOS) library.

We will install and configure the animation library in this step so that it can be accessed and used in the project. To install the library, run the following command:

npm install aos

The above command will install the animation library, and once it has been successfully installed, it is important to update the styles array in the angular.json file to include the animation library. To do this, open the angular.json file and add the following line to it;

“node_modules/aos/dist/aos.css”

Having done that correctly, we have successfully installed and configured the AOS library, which makes it ready for use in our project.

We may need to restart our server in order for our project to be updated with recent changes after installation, but only if our project appears to be out of date.

3. Initializing/ Animating with the Animate On Scroll Library (AOS).

In this step, we would finally bring our animations to life and make them work as we scroll through our web pages. Let's get started and see what happens.
First, we must open our desired component's TS file, for example, “home-component.ts”, import the AOS library, and initialize it. This can be accomplished by following the steps outlined below;

1. Import the library: Inside the desired component.ts file, add the import;

import AOS from "aos";

1. Initialize the functionality: To get the AOS library functioning, it is important to call the init() function in the ngOnInit of our component.ts file. This can simply be done by adding the the following line of code:

AOS.init();

By doing this, the AOS library has been initialized and our animations are ready for action. But before we can see the effects, we must open our component.html file(e.g home-component.html), which must be the html component of the ts file we just worked on, and set animation using the data-aos attribute in our desired divs. Example;

<div data-aos="fade-up" data-aos-duration="3000">
  <!-- our contents —->
</div>

The code above would add a fade-up animation to the div on scroll, but the capability of the AOS Library is not limited to this. To discover more animations, The official Animate on Scroll website has an experience of animations and effects provided by the library. You may check it out here and notice how the effects happen as you scroll down and up the page.

Conclusion.

So far in this article, we've been able to see how easy it is to set up an Angular app with Animate On Scroll effects on its pages using the AOS Library. Questions and suggestions are always welcome in the comments. See you in the next article.
Happy Coding!

Thank you for reading this far. I hope you found the tutorial useful. If you have any questions or comments, please leave them in the comments section.