Using AOS in ANGULAR

[boluwatifee4]

In case anyone had been wondering how to use this wonderful library in your angular app, check out this guide: https://dev.to/this-is-angular/how-to-implement-animate-on-scroll-in-angular-web-apps-using-the-aos-library-28d7

[mhp-borisbojic]

@boluwatifee4 There are some issues that the animations only start to work after e.g. moving the browser window.

I could resolve this only by using a (ugly) timeout and call an AOS.refresh():

  ngOnInit(): void {
    AOS.init({
      duration: 750,
      delay: 150,
    })
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      AOS.refresh()
    }, 500)
  }

[Ajay-8086]

make sure In your angular.json file, add the AOS CSS and JS to the styles and scripts sections, respectively: "styles": [ "node_modules/aos/dist/aos.css", "src/styles.css" ], "scripts": [ "node_modules/aos/dist/aos.js" ] and it can be done like this ngOnInit(): void { AOS.init({ duration: 750, delay: 150, }); }

ngAfterViewInit(): void { this.refreshAOS(); }

private refreshAOS(): void { AOS.refresh(); }