Animate Elements In When They Enter The Viewport – ngx-animate-in

Description:

ngx-animate-in is a small Angular library to make it easy to animate elements in whenever they enter the viewport.

Installation:

# NPM
$ npm install ngx-animate-in--save

Usage:

Import the module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AnimateInModule } from '../../src';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductComponent } from './product-list/product/product.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AnimateInModule
  ],
  declarations: [
    AppComponent,
    ProductListComponent,
    ProductComponent,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the ‘animateIn’ to the target element and set the custom animations as these:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { animate, style } from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `<div class="greetings center">
    <div>
      <h1 animateIn>{{'Hello from App Component'}}</h1>
      <h2 animateIn [animateInAnimation]="customAnimation">Custom animation!</h2>
    </div>
  </div>
  <app-product-list></app-product-list>
  `,
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  customAnimation = [
    style({opacity: 0, transform: 'translateY(-100px)'}),
    animate('600ms cubic-bezier(0.35, 0, 0.25, 1)', style({opacity: 1, transform: 'translateY(0)'}))
  ];

}

Preview: