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.

Comments

[Syahiruddin Daud]

Hi! This is an awesome article on AOS with Angular. Your explanation is clear and easy to understand. I managed to use it successfully in my project. But, I am facing issue using AOS for Angular SSR/universal.

Is this something you can help with?

Thank you

[Bima]

What problem are you facing in particular ?

[Syahiruddin Daud]

Im, good thank you managed to solved it. Cheers~!

[Bima]

Alright, glad to hear. Sorry for the late response. Happy coding!!

[Ignace Mella]

I have the same issue I think, how did you managed to solved it?

[Bima]

Hello Ignace, What error in particular did you get?

[Ignace Mella]

I'm always getting errors like document. not found etc, probably because it tries to load the animations but document doesn't exists server side.

[Bima]

Alright try this please:

// 1) import PLATFORM_ID from '@angular/core', eg:
import {  PLATFORM_ID } from '@angular/core';

// 2) Inject in the component constructor where you have to init the AOS, eg:

constructor( @Inject(PLATFORM_ID) private platformId: Object)

// 3) Wrap the AOS.init with this if statement, eg:

 if (isPlatformBrowser(this.platformId)) { AOS.init(); })

Please give feedback thanks

[Brandon McCray]

Love the article. Got it working very easily, but it seems to only be working on the divs that are on the screen initially and does not animate when I scroll down the page. Is there a separate setting I need to add to get it to work as I scroll?

[Bima]

Hi Brandon, thanks alot. If I get you correctly, you're saying the animations aren't firing as you scroll on divs/elements that had not been in view?

[Brandon McCray]

That is correct.

[Bima]

Sorry for late replies. I had been trying to recreate the issue but I can't. Can you please re-confirm if you did all the configurations correct and check your console as you scroll should incase it could trigger an error message to assist in debugging.

Also you can checkout this settings:

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)


  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

[mamba24]

Try (startEvent: 'scroll) in the AOS.init({. This way it will fire when scrolling.