A Collection of Cool, Reusable and Flexible Animations for Angular | ng-animate

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:


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';

  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>


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


  • backInDown
  • backInLeft
  • backInRight
  • backInUp
  • backOutDown
  • backOutLeft
  • backOutRight
  • backOutUp


  • 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


All fading animations have additional params fromOpacitytoOpacity 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 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


  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY


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


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

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


  • jackInTheBox
  • hinge
  • rollIn
  • rollOut


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

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…