#Can't get the AOS package to work.

18 messages · Page 1 of 1 (latest)

twin kelp
#

Hello, I installed both aos and @types/aos, but I can't get it to animate my div on scroll.
I added it to angular.json in styles, in scripts, I import the library in the component it's used in, and I initialize it in ngOnInit.

There's simply no animation shown when I scroll down to the div.

import { Component, OnInit } from '@angular/core';
import * as AOS from 'aos';

@Component({
  selector: 'app-slitbanners',
  templateUrl: './slitbanners.component.html',
  styleUrls: ['./slitbanners.component.scss']
})
export class SlitbannersComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    AOS.init();
  }

}

<div data-aos="fade-right" class="slitbanner">

Here's how I added it, and I believe that's how it should be done, but it doesn't animate my div on scroll at all. No errors in the console.

storm ether
#

Published 4 years ago
Issues 288
Not sure this is a winner of a package to use 🙂

twin kelp
#

Yeah, I agree, I just found it was convenient to be honest

#

There are recent articles and videos about it, so I figured it still works :(

storm ether
#

It would probably have to be wrapped in Angular-isms. Which would be a whole thing to do.

twin kelp
#

Eh, alright, do you have any similar package recs?

#

I'm looking to do animations on scroll, in case that wasn't clear 😛

storm ether
#

First I guess try putting AOS.init in the ngAfterViewInit. Since that is when the view will have the <div data-aos="fade-right"

#

I just use CSS for animation. And generally not so much on scroll, but if so I would use the Intersection Observer.

twin kelp
#

Well I don't have that error, since I also added the @types/aos package

#

And the refresh

#

Added the refresh, doesn't seem to work for me :(

storm ether
#

yes, but it works. and you said yours doesn't

#

so figure out what is different

twin kelp
#

Okay, I figured it out, I simply had put the aos.css line in angular.json at the wrong spot, thank you for your help! ❤️

#

I put it under "test" instead of "build"