Skip to content
Related Articles

Related Articles

AngularJS | Animations

View Discussion
Improve Article
Save Article
  • Last Updated : 23 May, 2019

To create animation effect in Angular.Js using ngAnimate module, that provides support for CSS based animations.
The animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using ngAnimate module that gives us a combined effect of Javascript and CSS.

Using this sample code, the demonstration of hiding the division/section is showed up by checking the checkbox.

Steps to bring Animation using AngularJs into the picture:

  • Include Angular.Js animate lib in script tag as:


  • Refer to the ngAnimate module inside body tag as:


  • ngAnimate module adds and removes classes.The Directives used in AngularJS that adds/removes classes are:

    ng-show, ng-hide

Examples: Below is the implementation of Angular.Js animation.

    div {
        transition: 0.6s;
        border-radius: 500%;
        height: 250px;
        width: 250px;
        background-color: red;
        display: inline-block;
    .ng-hide {
        background-color: yellow;
        top: 5px;
        left: 100px;
<script src=
<script src=
<body ng-app="ngAnimate">
    <h1>Hide the Circle 
      <input type="checkbox" 
    <div ng-hide="myCheck"></div>



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!