Skip to content
Related Articles
Open in App
Not now

Related Articles

AngularJS Animations

Improve Article
Save Article
Like Article
  • Last Updated : 06 Sep, 2022
Improve Article
Save Article
Like Article

To create animation effects in AngularJS using the ngAnimate module, which provides support for CSS-based animations. Animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using the ngAnimate module that gives us a combined effect of Javascript and CSS. Using this sample code, the demonstration of hiding the division/section is shown 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 the body tag as:


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

ng-show, ng-hide

Example: This example describes the implementation of Angular.Js animation.


<!DOCTYPE html>
    <script src=
    <script src=
        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;
<body ng-app="ngAnimate" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>AngularJS Animations</h3>
    <h3>Hide the Circle
        <input type="checkbox" ng-model="myCheck">
    <div ng-hide="myCheck"></div>



My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!