Angular-Animations Utility Library

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). Works both with AOT and JIT compilations.

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 animations, like Attention Seekers are triggered by any changes of the state, all in and out animations are triggered by changes of state from false to true. Animations that preserve state, like collapse or rotate display default state when the value is false and transition to end state when the value is true

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 scale.

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>

Available Animations and Parameters

All animations have duration and delay params.

	Animation	Default Anchor	OnEnter/OnLeave	Additional Params
Attention Seekers
	bounce	`[@bounce]`	`[@bounceOnEnter]`
	flash	`[@flash]`	`[@flashOnEnter]`
	pulse	`[@pulse]`	`[@pulseOnEnter]`	`scale` (default: 1.05)
	rubberBand	`[@rubberBand]`	`[@rubberBandOnEnter]`
	shake	`[@shake]`	`[@shakeOnEnter]`	`translate` (default: '10px')
	swing	`[@swing]`	`[@swingOnEnter]`
	tada	`[@tada]`	`[@tadaOnEnter]`
	wobble	`[@wobble]`	`[@wobbleOnEnter]`
	jello	`[@jello]`	`[@jelloOnEnter]`
Bouncing entrances
	bounceIn	`[@bounceIn]`	`[@bounceInOnEnter]`
	bounceInDown	`[@bounceInDown]`	`[@bounceInDownOnEnter]`	`translate` (default: '3000px')
	bounceInLeft	`[@bounceInLeft]`	`[@bounceInLeftOnEnter]`	`translate` (default: '3000px')
	bounceInRight	`[@bounceInRight]`	`[@bounceInRightOnEnter]`	`translate` (default: '3000px')
	bounceInUp	`[@bounceInUp]`	`[@bounceInUpOnEnter]`	`translate` (default: '3000px')
Bouncing exits
	bounceOut	`[@bounceOut]`	`[@bounceOutOnLeave]`
	bounceOutDown	`[@bounceOutDown]`	`[@bounceOutDownOnLeave]`	`translate` (default: '2000px')
	bounceOutLeft	`[@bounceOutLeft]`	`[@bounceOutLeftOnLeave]`	`translate` (default: '2000px')
	bounceOutRight	`[@bounceOutRight]`	`[@bounceOutRightOnLeave]`	`translate` (default: '2000px')
	bounceOutUp	`[@bounceOutUp]`	`[@bounceOutUpOnLeave]`	`translate` (default: '2000px')
Fading entrances
	fadeIn	`[@fadeIn]`	`[@fadeInOnEnter]`
	fadeInDown	`[@fadeInDown]`	`[@fadeInDownOnEnter]`	`translate` (default: '100%')
	fadeInDownBig	`[@fadeInDownBig]`	`[@fadeInDownBigOnEnter]`	`translate` (default: '2000px')
	fadeInLeft	`[@fadeInLeft]`	`[@fadeInLeftOnEnter]`	`translate` (default: '100%')
	fadeInLeftBig	`[@fadeInLeftBig]`	`[@fadeInLeftBigOnEnter]`	`translate` (default: '2000px')
	fadeInRight	`[@fadeInRight]`	`[@fadeInRightOnEnter]`	`translate` (default: '100%')
	fadeInRightBig	`[@fadeInRightBig]`	`[@fadeInRightBigOnEnter]`	`translate` (default: '2000px')
	fadeInUp	`[@fadeInUp]`	`[@fadeInUpOnEnter]`	`translate` (default: '100%')
	fadeInUpBig	`[@fadeInUpBig]`	`[@fadeInUpBigOnEnter]`	`translate` (default: '2000px')
Fading exits
	fadeOut	`[@fadeOut]`	`[@fadeOutOnLeave]`
	fadeOutDown	`[@fadeOutDown]`	`[@fadeOutDownOnLeave]`	`translate` (default: '100%')
	fadeOutDownBig	`[@fadeOutDownBig]`	`[@fadeOutDownBigOnLeave]`	`translate` (default: '2000px')
	fadeOutLeft	`[@fadeOutLeft]`	`[@fadeOutLeftOnLeave]`	`translate` (default: '100%')
	fadeOutLeftBig	`[@fadeOutLeftBig]`	`[@fadeOutLeftBigOnLeave]`	`translate` (default: '2000px')
	fadeOutRight	`[@fadeOutRight]`	`[@fadeOutRightOnLeave]`	`translate` (default: '100%')
	fadeOutRightBig	`[@fadeOutRightBig]`	`[@fadeOutRightBigOnLeave]`	`translate` (default: '2000px')
	fadeOutUp	`[@fadeOutUp]`	`[@fadeOutUpOnLeave]`	`translate` (default: '100%')
	fadeOutUpBig	`[@fadeOutUpBig]`	`[@fadeOutUpBigOnLeave]`	`translate` (default: '2000px')
Flippers
	flip	`[@flip]`	`[@flipOnEnter]`
	flipInX	`[@flipInX]`	`[@flipInXOnEnter]`	`degrees` (default: 90)
	flipInY	`[@flipInY]`	`[@flipInYOnEnter]`	`degrees` (default: 90)
	flipOutX	`[@flipOutX]`	`[@flipOutXOnLeave]`	`degrees` (default: 90)
	flipOutY	`[@flipOutY]`	`[@flipOutYOnLeave]`	`degrees` (default: 90)
Light speed
	lightSpeedIn	`[@lightSpeedIn]`	`[@lightSpeedInOnEnter]`	`translate` (default: '100%')
	lightSpeedOut	`[@lightSpeedOut]`	`[@lightSpeedOutOnLeave]`	`translate` (default: '100%')
Rotating entrances
	rotateIn	`[@rotateIn]`	`[@rotateInOnEnter]`	`degrees` (default: -200)
	rotateInDownLeft	`[@rotateInDownLeft]`	`[@rotateInDownLeftOnEnter]`	`degrees` (default: -45)
	rotateInDownRight	`[@rotateInDownRight]`	`[@rotateInDownRightOnEnter]`	`degrees` (default: 45)
	rotateInUpLeft	`[@rotateInUpLeft]`	`[@rotateInUpLeftOnEnter]`	`degrees` (default: 45)
	rotateInUpRight	`[@rotateInUpRight]`	`[@rotateInUpRightOnEnter]`	`degrees` (default: -90)
Rotating exits
	rotateOut	`[@rotateOut]`	`[@rotateOutOnLeave]`	`degrees` (default: 200)
	rotateOutDownLeft	`[@rotateOutDownLeft]`	`[@rotateOutDownLeftOnLeave]`	`degrees` (default: 45)
	rotateOutDownRight	`[@rotateOutDownRight]`	`[@rotateOutDownRightOnLeave]`	`degrees` (default: -45)
	rotateOutUpLeft	`[@rotateOutUpLeft]`	`[@rotateOutUpLeftOnLeave]`	`degrees` (default: -45)
	rotateOutUpRight	`[@rotateOutUpRight]`	`[@rotateOutUpRightOnLeave]`	`degrees` (default: -90)
Sliding entrances
	slideInUp	`[@slideInUp]`	`[@slideInUpOnEnter]`	`translate` (default: '100%')
	slideInDown	`[@slideInDown]`	`[@slideInDownOnEnter]`	`translate` (default: '100%')
	slideInLeft	`[@slideInLeft]`	`[@slideInLeftOnEnter]`	`translate` (default: '100%')
	slideInRight	`[@slideInRight]`	`[@slideInRightOnEnter]`	`translate` (default: '100%')
Sliding exits
	slideOutUp	`[@slideOutUp]`	`[@slideOutUpOnLeave]`	`translate` (default: '100%')
	slideOutDown	`[@slideOutDown]`	`[@slideOutDownOnLeave]`	`translate` (default: '100%')
	slideOutLeft	`[@slideOutLeft]`	`[@slideOutLeftOnLeave]`	`translate` (default: '100%')
	slideOutRight	`[@slideOutRight]`	`[@slideOutRightOnLeave]`	`translate` (default: '100%')
Zooming entrances
	zoomIn	`[@zoomIn]`	`[@zoomInOnEnter]`
	zoomInDown	`[@zoomInDown]`	`[@zoomInDownOnEnter]`
	zoomInLeft	`[@zoomInLeft]`	`[@zoomInLeftOnEnter]`
	zoomInRight	`[@zoomInRight]`	`[@zoomInRightOnEnter]`
	zoomInUp	`[@zoomInUp]`	`[@zoomInUpOnEnter]`
Zooming exits
	zoomOut	`[@zoomOut]`	`[@zoomOutOnLeave]`
	zoomOutDown	`[@zoomOutDown]`	`[@zoomOutDownOnLeave]`
	zoomOutLeft	`[@zoomOutLeft]`	`[@zoomOutLeftOnLeave]`
	zoomOutRight	`[@zoomOutRight]`	`[@zoomOutRightOnLeave]`
	zoomOutUp	`[@zoomOutUp]`	`[@zoomOutUpOnLeave]`
Specials
	hinge	`[@hinge]`	`[@hingeOnLeave]`
	jackInTheBox	`[@jackInTheBox]`	`[@jackInTheBoxOnEnter]`
	rollIn	`[@rollIn]`	`[@rollInOnEnter]`	`degrees` (default: -120), `translate` (default: '-100%')
	rollOut	`[@rollOut]`	`[@rollOutOnLeave]`	`degrees` (default: 120), `translate` (default: '100%')
Other
	collapse	`[@collapse]`	`[@expandOnEnter]` `[@collapseOnLeave]` `[@fadeInExpandOnEnter]` `[@fadeOutCollapseOnLeave]`
	rotate	`[@rotate]`	`-`	`degrees` (default: 90)
	hueRotate	`[@hueRotate]`	`-`

Running Demo App

npm install
npm start

Authors

Chris Filipowski - filipows

License

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

Name		Name	Last commit message	Last commit date
Latest commit History 131 Commits
.vscode		.vscode
demo-app		demo-app
lib		lib
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tslint.json		tslint.json

License

dalepo/angular-animations

Folders and files

Latest commit

History

Repository files navigation

Angular-Animations Utility Library

Quick links

Getting Started

Prerequisites

Installation

Usage

Animations on enter / on leave

Animations with state or triggered by state changes

Parametrized animations

Available Animations and Parameters

Running Demo App

Authors

License

About

Resources

License

Stars

Watchers

Forks

Languages

Animations `on enter` / `on leave`