ngx-aos

Animated scrolling functionality for angular written in pure typescript

Usage no npm install needed!

<script type="module">
  import ngxAos from 'https://cdn.skypack.dev/ngx-aos';
</script>

README

ngx-aos-demo

Version compatibility

Install later versions in case your app is not running the very latest angular version.

ngx-aos/ngx-aos-core version compatible angular version Documentation
v7.x v12, v11, v10, v9, v8 README
v6.x v8, v7 README
v5.x v6 README
v4.x v5, v4 README

Service

Setup

First you need to install the core npm module:

npm install ngx-aos-core --save

Then add the NgxNgxAosModule to the imports array of your application module:

import { NgxNgxAosModule } from 'ngx-aos-core';

@NgModule({
    imports: [
        /* Other imports here */
        NgxNgxAosModule
        ]
})
export class AppModule {
}

Usage

Using the NgxAosService#init method you may trigger init animations. Provide an options object that provides a reference to the document and the init target. Additional properties are optional.

import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { NgxAosService } from 'ngx-aos-core';

export class MyComponent {
 constructor(private aos: NgxAosService) {
 }
   
 ngOnInit(): void {
  this.aos.init({
  });
 }
}