angular-animations

Angular-Animations Utility Lirary

Easy, Reusable Animation Utility library for Angular Apps.

Angular Animations utility library is a collection of reusable and parametrized animations build for Angular 4.4.6+ that can be used in a declarative manner. It implements all animations from animate.css (and more).

Quick links

Demo | StackBlitz Template

Getting Started

Prerequisites

Make sure you import BrowserAnimationModule in your angular app.

 npm i @angular/animations@latest --save

Import BrowserAnimationsModule from @angular/platform-browser/animations in your root NgModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BrowserAnimationsModule
  ],
})
export class AppModule { }

Installation

 npm i angular-animations --save

Usage

Animations on enter / on leave

Animations on enter / on leave are triggered in a moment when element is added to or removed from the dom. Basic example would be with *ngIf template directive.

Import animation functions that you want to use and add them to animations in a component decorator:

import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  animations: [
    fadeInOnEnterAnimation(),
    fadeOutOnLeaveAnimation()
  ]
})

and use them in the template:

<div  *ngIf="CONDITION"  [@fadeInOnEnter] [@fadeOutOnLeave]></div>

Animations with state or triggered by state changes

These animations take as an input a boolean value. Some of animations, like Attention Seekers are triggered by any changes of the state, but others like collapse or rotate animations are displaying default state when the value is falsy and transition to end state when the value is truthy

import { collapseAnimation, rubberBandAnimation } from 'angular-animations';

@Component({
  ...
  animations: [
    rubberBandAnimation(),
    collapseAnimation(),
  ]
})

<div  [@rubberBand]="rubberState"></div>
<div  [@collapse]="collapseState"></div>

Parametrized animations

All animations are open for customizations. All of them have parameters: duration and delay, and if it make sense for an animation, additional ones: translate, degrees or scalingFactor.

Parameters can be used either in a component decorator or dynamically in a template.

In a decorator:

@Component({
  ...
  animations: [
    fadeInUpOnEnterAnimation({ anchor: 'enter', duration: 1000, delay: 100, translate: '30px' }),
    bounceOutDownOnLeaveAnimation({ anchor: 'leave', duration: 500, delay: 200, translate: '40px' })
  ]
})

<div  *ngIf="CONDITION"  [@enter] [@leave]></div>

In a template (providing option for dynamic changes):

@Component({
  ...
  animations: [
    fadeInUpOnEnterAnimation({ anchor: 'enter'),
  ]
})

<div  *ngIf="CONDITION"  [@enter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" [@leave]></div>
<div  *ngIf="CONDITION"  [@enter]="{ value: '', params: { duration: 300, delay: 100, translate: '40px } }" [@leave]></div>

With parameters in a template, we can for ex achieve staggering animations:

<div  *ngFor="let i of [1,2,3]"  [@enter]="{ value: '', params: { delay: i * 100 } }"></div>

Running Demo App

npm start

Authors

• Chris Filipowski - filipows

License

This project is licensed under the MIT License - see the LICENSE file for details