NgxAnimations

This is an adaptation of the Animate.css animations using the @angular/animations library.

Installing and importing NgxAnimations

Install ngx-animations :

npm install ngx-animations

yarn add ngx-animations

Import the BrowserAnimationsModule and NgxAnimationsModule in your module :

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

@NgModule({
  imports:      [ BrowserAnimationsModule, NgxAnimationsModule ],
  ...
})

Using the `AnimatedDirective` to create animations on events with a minimum of code

<div (click)="myDiv.animate()">
  <div #myDiv="animated" [animAted]="{time: 800, animation: 'flip'}"></div>
</div>

Running example on stackblitz using @ngx-starter-kit/ngx-utils InViewportDirective

Using the `AnimIfDirective` to animate an element on init and before destroy

Use the *animIf directive to set the start and end animation :

<div
  *animIf="show; info: { startAnim: 'bounceIn', endAnim: 'bounceOut', time: 1000 }"
></div>

Add custom animations to the existing animations

Create an AnimationDefinition instance for every animation you want to add :

const animationDefinition = new AnimationDefinition({}, [
  { background: 'blue', width: '25%', offset: 0.25 },
  { background: 'green', width: '100%', offset: 0.5 },
  { background: 'yellow', width: '50%', offset: 0.75 },
  { background: 'black', width: '200px', offset: 1 }
]);

Inject the AnimationsService in your AppModule and use the addAnimations method to add your array of AnimationDefinitions:

constructor(private animationsService: AnimationsService) {
  this._animationsService.addAnimations([{ name: 'aCustomAnimation', animation: animationDefinition }]);
}

That's it, you are now ready to use your custom animation like other native animations.

You can find a running example for custom animations on stackblitz

Use the AnimationsService to create and use animations (you can use `AnimatedDirective` instead)

Then in your component :

Import the desired animation and the AnimationsService :

import { fadeIn, AnimationsService } from 'ngx-animations';

Get your element using the @ViewChild annotation :

@ViewChild('element') element: ElementRef;

Inject the AnimationsService :

constructor(private animationsService: AnimationsService) {}

After that you can create the player :

const player = this.animationsService.create(
  fadeIn(300),
  this.element.nativeElement
);

And play the animation :

player.play();

List of animations

bounce flash pulse rubberBand shake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight slideInUp slideInDown slideInLeft slideInRight slideOutUp slideOutDown slideOutLeft slideOutRight zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp hinge jackInTheBox rollIn rollOut

gurachan/ngx-animations