animate into view when scrolled to angular2

Question

I found a library for animating elements into view when scrolled to (aos), but it doesn't seem to have any angular2 bindings for using. Does anyone know of how to accomplish something like this inside angular2, or at least configure aos to work within angular2?

Thanks for any help

Answer 1

For those who encounter this problem from 2020, there is a simpler way to solve this problem in the latest versions of Angular:

1. Import the AOS library: npm i -s aos
2. Import the typing into TypeScript: npm i -D @types/aos
3. Import CSS in the global style (Probably src/styles.scss): @import "~aos/dist/aos.css";
4. Start AOS on your project's root component (Probably app-component.ts)

import * as AOS from 'aos';
...
export class AppComponent implements OnInit {
    ngOnInit(): void {
        AOS.init();
    }
}

5. Be happy:

<img data-aos="animation_name" src="..."/>

e.g.:

<img data-aos="fade" src="..."/>

Animation names list: https://github.com/michalsnik/aos/tree/v2#-animations

Advanced settings: https://github.com/michalsnik/aos/tree/v2#-advanced-settings

Answer 2

Angular (meaning version 2+) makes it pretty easy to include any 3rd-party JS libraries into your app. I was able to get aos working in Angular 4 by following these steps:

Disclaimer: you may be able to accomplish the same or better using @angular/animations, but if you want to use aos (or other third-party libraries) in Angular, this will show you how to do it. To learn more about how to use @angular/animations, visit https://angular.io/guide/animations

• Install the Angular CLI: npm i -g @angular/cli
• Create a new Angular app: ng new angular-aos-app
• Install aos: npm i --save aos

• Include the aos CSS in .angular-cli.json:

  {
    ...
    "apps": [
      {
        ...
        "styles": [
          "styles.css",
          "../node_modules/aos/dist/aos.css"
        ],
        ...
      }
    ]
    ...
  }
  

• Wire up aos through Angular's Dependency Injection system:

  // aos.ts  
  import * as animateOnScroll from 'aos';  
  import { InjectionToken } from '@angular/core';  
  
  export const aos = animateOnScroll;  
  // This makes it possible to refer to AOS in Angular, see below
  export const AosToken = new InjectionToken('AOS');
  

  // app.module.ts  
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';        
  import { AosToken, aos } from './aos';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule ],
    providers: [
      //register AOS with DI
      { provide: AosToken, useValue: aos }
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  

• Inject aos into your component:

  //app.component.ts
  import { Component, Inject } from '@angular/core';  
  import { AosToken } from './aos';  
  
  @Component({  
    selector: 'app-root',  
    templateUrl: './app.component.html',  
    styleUrls: ['./app.component.css']  
  })  
  export class AppComponent {  
    title = 'app';  
  
    //use the injection token to inject into your constructor
    constructor(@Inject(AosToken) aos) {  
      aos.init();  //you can now use it, although you may want to do this onInit instead
    }  
  }
  

• Add some aos animation to your HTML: <ul data-aos="slide-left">

  <div style="text-align:center">
    <h1>
      Welcome to {{title}}!!
    </h1>
  </div>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <h2>Here are some links to help you start: </h2>
  <ul data-aos="slide-left"><!-- animate this list when you scroll down -->
    <li>
      <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
    </li>
  </ul>