DEV Community

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

Bima on May 18, 2022

Introduction Animations pique a user's interest in applications. Not only that, animations can also be used to improve UX(user experience) conside...

Read full post

Syahiruddin Daud • Jun 14 '22

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 • Jul 8 '22

What problem are you facing in particular ?

Syahiruddin Daud • Jul 9 '22

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

Bima • Jul 10 '22

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

Ignace Mella • Aug 9 '22

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

Bima • Aug 9 '22

Hello Ignace, What error in particular did you get?

Ignace Mella • Aug 9 '22

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 • Aug 9 '22

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 • Jan 26 '23

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 • Jan 26 '23

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 • Jan 26 '23

That is correct.

Bima • Jan 31 '23 • Edited

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 • Jun 9 '23

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