Introduction

Animations capture a user's interest in applications. Beyond that, animations can serve as a tool to enhance user experience (UX), as dramatic transitions and motion on the screen can help hold a user's attention while page content loads. In this article, we will explore how to apply the Animate On Scroll (AOS) library to bring animation effects to Angular web pages.

Learning Objectives

By the time you finish this article, you will know how to:

  • Install and set up the Animate On Scroll library
  • Initialize and apply animations to web pages built with Angular.

Prerequisites

To make the most of this guide, you should have a foundational grasp of the following technologies:

  • HTML
  • CSS
  • Angular
  • TypeScript

Let's dive in with a detailed walkthrough that covers each learning objective step by step.

1. Setting up/installing an Angular app

Before anything else, we need a running Angular application. You can achieve this by running the following set of commands:

ng new my-app

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

All our routing settings will need to be specified in the app-routing.module.ts file within our Angular project. The Angular CLI will generate the app-routing.module.ts file when we respond "YES" to the prompt "Would you like to add Angular routing?".

cd myApp
Enter fullscreen mode Exit fullscreen mode

This action changes our directory to the myApp folder.

ng serve --o
Enter fullscreen mode Exit fullscreen mode

This command serves and opens our Angular project at http://localhost:4200 by default, allowing us to view our application.

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

In this phase, we'll install and configure the animation library so it becomes accessible within our project. To install it, execute the following command:

npm install aos
Enter fullscreen mode Exit fullscreen mode

The command above installs the animation library. Once it completes successfully, we need to modify the styles array in the angular.json file to include the library's CSS. Open angular.json and append the following entry:

“node_modules/aos/dist/aos.css”
Enter fullscreen mode Exit fullscreen mode

Once this is done correctly, the AOS library is installed and configured, making it available for use in our project.

After installation, restarting the server may be necessary to pick up the latest changes, but only if the project appears to be stale.

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

At this point, we will finally bring our animations to life, enabling them to trigger as we scroll through our pages. Let's walk through the process.
First, locate the desired component's TypeScript file, such as home-component.ts. We'll import the AOS library there and initialize it. Follow these steps:

  1. Import the library: Within the relevant component.ts file, add the import statement; 
import AOS from "aos";
Enter fullscreen mode Exit fullscreen mode
  1. Initialize the functionality: To activate the AOS library, we must invoke the init() method within the ngOnInit lifecycle hook of our component.ts file. This is accomplished by adding the line of code below: 
AOS.init();
Enter fullscreen mode Exit fullscreen mode

With this step, the AOS library is now initialized, and our animations are ready to go. However, to see them in action, we need to open our component's HTML file (e.g., home-component.html), which must correspond to the TypeScript file we modified, and apply animations using the data-aos attribute on the elements of our choice. For example;


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

The snippet above adds a fade-up animation to the element when it scrolls into view. Yet, the AOS library offers much more than this single effect. To explore the full range of animations, check out the official Animate on Scroll website, which showcases the various effects and transitions available. You can visit it here and observe how these effects trigger as you scroll up and down the page.

Conclusion

Throughout this article, we've demonstrated how straightforward it is to integrate Animate On Scroll effects into an Angular application using the AOS library. Feel free to leave any questions or suggestions in the comments. See you in the next article.
Happy coding!

Thank you for sticking with us to the end. I hope the tutorial proved useful. If you have any questions or feedback, please don't hesitate to share them below.