A library of cool, reusable and flexible animations for Angular
npm install ng-animate
ng-animate is a collection of cool, reusable and flexible animations for Angular. It implements all the animations in animate.css, but with the power and flexibility of Angular animations instead of CSS.
The demo of the animations is available at https://jiayihu.github.io/ng-animate/.
```
npm install ng-animate --save
Import the animation from the package and pass it to your Angular component using useAnimation:
`javascript
// my-component.component.ts
import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce } from 'ng-animate';
@Component({
selector: 'my-component',
templateUrl: 'my-component.component.html',
animations: [
trigger('bounce', [transition(' => ', useAnimation(bounce))])
],
})
export class MyComponent {
bounce: any;
}
`
`html`
Note: Make sure to have included BrowserAnimationsModule in your AppModule and the web-animation.js polyfill.
It's also possible to import only a subset of the animations:
`javascript`
import { bounce } from 'ng-animate/lib/bouncing';
All the animations provided by ng-animate support at least two optional params timing and delay to specify the animation duration and delay. Default value for timing is usually 1s and 0s for delay. params
You can pass the object using the Javascript API or within the component template:
`javascript`
@Component({
selector: 'my-component',
templateUrl: 'my-component.component.html',
animations: [
trigger('bounce', [transition(' => ', useAnimation(bounce, {
// Set the duration to 5seconds and delay to 2seconds
params: { timing: 5, delay: 2 }
}))])
],
})
export class MyComponent {}
Using a template can achieve the same result, but you'll have access to the component context:
`html`
All the animations are organized by their group. Many of them have additional params other than timing/delay: refer to Advanced Usage for more details. Nevertheless you can probably ignore them if you're happy with how they are by default.
- bounceflash
- pulse
- rubberBand
- shakeX
- shakeY
- headShake
- swing
- tada
- wobble
- jello
- heartBeat
-
- backInDownbackInLeft
- backInRight
- backInUp
-
- backOutDownbackOutLeft
- backOutRight
- backOutUp
-
- bounceInbounceOut
- . Additional param: scale
The following bouncing animations have additional params a, b, c, d for translate
- bounceInDownbounceInLeft
- bounceInRight
- bounceInUp
-
- bounceOutDownbounceOutLeft
- bounceOutRight
- bounceOutUp
-
All fading animations have additional params fromOpacity, toOpacity for opacity transition and a, b for translate.
- fadeInfadeInDown
- fadeInLeft
- fadeInRight
- fadeInUp
-
- fadeInDownBigfadeInLeftBig
- fadeInRightBig
- fadeInUpBig
-
- fadeOutfadeOutDown
- fadeOutLeft
- fadeOutRight
- fadeOutUp
-
- fadeOutDownBigfadeOutLeftBig
- fadeOutRightBig
- fadeOutUpBig
-
The following fading animations do not have a, b for translate but fromX,fromY,toX,toY instead.
- fadeInTopLeftfadeInTopRight
- fadeInBottomLeft
- fadeInBottomRight
-
- fadeOutTopLeftfadeOutTopRight
- fadeOutBottomLeft
- fadeOutBottomRight
-
Sliding animations are basically fading animations without a change of opacity. They can also receive the same params.
- slideInDownslideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
-
- flipflipInX
- flipInY
- flipOutX
- flipOutY
-
- lightSpeedInlightSpeedLeft
- lightSpeedIn
- lightSpeedOut
- lightSpeedOutRight
- (same as lightSpeedOut)lightSpeedOutLeft
-
All rotating animations have additional params fromOpacity, toOpacity for opacity transition, origin for transform-origin and degrees for rotate3d.
- rotateInrotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
-
- jackInTheBoxhinge
- rollIn
- rollOut
-
- zoomInzoomOut
-
The following zooming animations have additional params a, b for translate
- zoomInDownzoomInLeft
- zoomInRight
- zoomInUp
-
- zoomOutDownzoomOutLeft
- zoomOutRight
- zoomOutUp
-
Many of the animations support also other params like scale, fromOpacity, toOpacity and much more, allowing extremely flexible usage and customization if you're not happy with default values.
Single letters like a, b, c, d are used for the steps of some animations: a is the starting value, d is the ending. translate
The animated property they refer to depends on the animation and the direction: usually on axis Y from -Down/-Up, axis X for -Left/-Right.
`javascript
useAnimation(bounceInDown, {
params: {
timing: 5,
// Specify granular values for translate on axis Y during 'bounceInDown' ``
a: '-3000px',
b: '25px',
c: '-10px',
d: '5px',
}
})