ng-animate is a collection of cool, reusable, and flexible animations for Angular. It implements all animations in animate.css, but with the power and flexibility of Angular animation instead of CSS.

angularanimations npm, angular animation expand collapse, angular animations examples, angular animation transition, angular animation library

An animation Library To Enhance “animate.css” Dynamic Plugin

How to make use of it:

Install

npm install ng-animate --save

Import the animation from the package and pass it to your Angular component using useAnimation:

// 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;
}

<!-- my-component.component.html -->
<div [@bounce]="bounce"></div>

Animations

All animations are organized by their group. Many of them have additional parameters other than timing/delay: Refer to advanced usage for more details. However, you can most likely ignore it if you are happy with its default status.

Attention seekers

• bounce
• flash
• pulse
• rubberBand
• shakeX
• shakeY
• headShake
• swing
• tada
• wobble
• jello
• heartBeat

Back

• backInDown
• backInLeft
• backInRight
• backInUp

• backOutDown
• backOutLeft
• backOutRight
• backOutUp

Bouncing

• bounceIn
• bounceOut. Additional param: scale

The following bouncing animations have additional params a, b, c, d for translate

• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp

• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp

Fading

All fading animations have additional params fromOpacity, toOpacity for opacity transition and a, b for translate.

• fadeIn
• fadeInDown
• fadeInLeft
• fadeInRight
• fadeInUp

• fadeInDownBig
• fadeInLeftBig
• fadeInRightBig
• fadeInUpBig

• fadeOut
• fadeOutDown
• fadeOutLeft
• fadeOutRight
• fadeOutUp

• fadeOutDownBig
• fadeOutLeftBig
• fadeOutRightBig
• fadeOutUpBig

The following fading animations do not have a, b for translate but fromX,fromY,toX,toY instead.

• fadeInTopLeft
• fadeInTopRight
• fadeInBottomLeft
• fadeInBottomRight

• fadeOutTopLeft
• fadeOutTopRight
• fadeOutBottomLeft
• fadeOutBottomRight

Sliding

Sliding animations are basically fading animations without a change of opacity. They can also receive the same params.

• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

Flippers

• flip
• flipInX
• flipInY
• flipOutX
• flipOutY

LightSpeed

• lightSpeedIn
• lightSpeedLeft
• lightSpeedIn
• lightSpeedOut
• lightSpeedOutRight (same as lightSpeedOut)
• lightSpeedOutLeft

Rotating

All rotating animations have additional params fromOpacity, toOpacity for opacity transition, origin for transform-origin and degrees for rotate3d.

• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight

Specials

• jackInTheBox
• hinge
• rollIn
• rollOut

Zooming

• zoomIn
• zoomOut

The following zooming animations have additional params a, b for translate

• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp

• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp

collection of cool animations for angular, ng-animate Plugin/Github, angular animation slide left and right

See Demo And Download

Official Website(jiayihu): Click Here

This superior jQuery/javascript plugin is developed by jiayihu. For extra advanced usage, please go to the official website.