Animating AngularJS Apps with ngAnimate

AngularJS is a superheroic JavaScript framework which makes creating Single Page Applications (SPA) very easy. On top of that AngularJS comes with a handful of angular modules that can be used to create an awesome user experience. In this post we are going to see how to use popular ngAnimate to add page transitions/animations to angular views.

ngAnimate can be used with various directives like ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.

In this post we will use animations with ngView

Here we are using Brackets IDE from Adobe, but  you are free to use others, for example, Sublime Text, WebStorm from JetBrains etc.

Note : We will also use Bootswatch Bootstrap API to give our HTML pages a beautiful look

Project Structure :

Below is the project structure in Brackets IDE

Here is the short description of each file used in the project

animation.css – main CSS file where we define our page animations

bootstrap.min.css – bootswatch bootstrap for giving our <a> tags a beautiful look

config.js – main JavaScript file where we define our angular module along with routes and controllers

shellPage.html – This is the shell page in which other views will be loaded dynamically

view1.html, view2.html, view3.html – These are the partial views which will be loaded into the shellPage

How are animations applied:

ngAnimate applies CSS classes to different Angular directives depending on whether they are entering or leaving the view

.ng-enter – This CSS class applies on the directive whenever it gets loaded in the page

.ng-leave – This CSS class applies on the directive whenever it leaves the page

Let’s go through each file one by one

shellPage.html

shellPage loads the required resources, applies ng-app to body and adds ng-view to inject the views dynamically.

< html>
< head>

	< !-- Main CSS style where we define our animations -->
    < link rel="stylesheet" href="css/animation.css">

	< !-- Bootswatch Bootstrap to give our pages (buttons) beautiful look -->
	< link rel="stylesheet" href="css/bootstrap.min.css">	

	< !-- JS for angular, ngRoute and ngAnimate -->
	< script src="https://code.angularjs.org/1.3.0/angular.js">< /script>
	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.js">< /script>
	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js">< /script>

    < !-- Main JS where we define our Angular Module along with routes and controllers -->
	< script src="js/config.js">< /script>

< /head>

< body ng-app="transitionApp">   

	< div class="view {{ cssClass }}" ng-view>< /div>

    < div id="heading">
        < h1>Animating with ngAnimate< /h1>       
    < /div>		

< /body>    

< /html>

config.js

In config file, we define our angular module along with routes and controllers.

Module transitionApp have two dependencies: ngAnimate and ngRoute

var transitionApp = angular.module('transitionApp', ['ngAnimate', 'ngRoute']);

transitionApp.config(function($routeProvider) {
    $routeProvider
    	.when('/', {
    		templateUrl: 'partials/view1.html',
            controller: 'view1Controller'
    	})
    	.when('/view2', {
    		templateUrl: 'partials/view2.html',
            controller: 'view2Controller'
    	})
    	.when('/view3', {
    		templateUrl: 'partials/view3.html',
            controller: 'view3Controller'
    	});

});

transitionApp.controller('view1Controller', function($scope) {
    $scope.cssClass = 'view1';
});

transitionApp.controller('view2Controller', function($scope) {
    $scope.cssClass = 'view2';
});

transitionApp.controller('view3Controller', function($scope) {
    $scope.cssClass = 'view3';
});

We have defined three partial views (view1, view2, view3) which will be injected into the shellpage depending on the URL. Respective Controllers sets a cssClass attribute, which is the name of CSS class, which will be applied to the ng-view. We will define our animations in these CSS classes that will load each page with different animations.

Partial pages view1.html, view2.html, view3.html

There is nothing much in partial pages, just some text and link to other views

view1.html

< h3>This is View 1< /h3>
< a href="#view2" class="btn btn-success btn-lg">View 2< /a>
< a href="#view3" class="btn btn-danger btn-lg">View 3< /a>

view2.html

< h3>This is View 2< /h3>
< a href="#" class="btn btn-primary btn-lg">View 1< /a>
< a href="#view3" class="btn btn-danger btn-lg">View 3< /a>

view3.html

< h3>This is View 3< /h3> 
< a href="#" class="btn btn-primary btn-lg">View 1< /a>
< a href="#view2" class="btn btn-success btn-lg">View 2< /a>

Remember that these three HTML files are partial pages which will be injected into shellPage.html according to the URL that we have defined in config.js file

Defining Styles and Animations :

Let’s put some life in our views by applying CSS to it

.view        { 
	bottom:0; 
	padding-top:200px;
	position:absolute; 
	text-align:center;
	top:0;  
	width:100%; 
}

.view a     { margin-top:50px; }
.view h1 	{ font-size:60px; }
#heading    { color:#333; position:absolute; text-align:center; top:50px; width:100%; }

/* Background and text colors for partial view pages (view1, view2, view3) 
------------------------------------------------------------- */
.view1  { background:#bef2de; color:#00907c; }
.view2 	{ background:#D4D0EA; color:#55316f; }
.view3 	{ background:#FFCBA4; color:rgba(149, 95, 40, 0.91); }

To make a clean transition between different views, we will set the CSS z-index property

.view.ng-leave 	{ z-index:9999; }
.view.ng-enter 	{ z-index:8888; }

Now it’s time to define our animations

Slide Left Animation

/* slide out left */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {	
	to 		{ -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-100%); }
}

Scale Up Animation

/* scale up */
@keyframes scaleUp {
	from 		{ opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
	from 		{ opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleUp {
	from 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

Slide In from Right Animation

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(100%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
	from 	{ -moz-transform:translateX(100%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
	from 	{ -webkit-transform:translateX(100%); }
	to 		{ -webkit-transform: translateX(0); }
}

Slide In from Bottom Animation

/* slide in from the bottom */
@keyframes slideInUp {
	from 	{ transform:translateY(100%); }
	to 		{ transform: translateY(0); }
}
@-moz-keyframes slideInUp {
	from 	{ -moz-transform:translateY(100%); }
	to 		{ -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
	from 	{ -webkit-transform:translateY(100%); }
	to 		{ -webkit-transform: translateY(0); }
}

Rotate and Fall Animation

/* rotate and fall */
@-webkit-keyframes rotateFall {
	0% { -webkit-transform: rotateZ(0deg); }
	20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
	40% { -webkit-transform: rotateZ(17deg); }
	60% { -webkit-transform: rotateZ(16deg); }
	100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
	0% { -moz-transform: rotateZ(0deg); }
	20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
	40% { -moz-transform: rotateZ(17deg); }
	60% { -moz-transform: rotateZ(16deg); }
	100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
	0% { transform: rotateZ(0deg); }
	20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
	40% { transform: rotateZ(17deg); }
	60% { transform: rotateZ(16deg); }
	100% { transform: translateY(100%) rotateZ(17deg); }
}

Rotate out Newspaper Animation 

/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
	to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
	to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
	to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

Applying Animations :

It’s time to apply the animations that we had defined before

View 1 Animations

/* View 1 animations for page leave and enter */
.view1.ng-leave         {
    -webkit-animation:slideOutLeft 0.5s both ease-in;
	-moz-animation:slideOutLeft 0.5s both ease-in;
	animation:slideOutLeft 0.5s both ease-in;  

}
.view1.ng-enter 		{  
    -webkit-animation:scaleUp 0.5s both ease-in;
	-moz-animation:scaleUp 0.5s both ease-in;
	animation:scaleUp 0.5s both ease-in;    
}

View 2 Animations

/* View 2 animations for page leave and enter */
.view2.ng-leave        {
    -webkit-transform-origin: 0% 0%;
	-webkit-animation: rotateFall 1s both ease-in;
	-moz-transform-origin: 0% 0%;
	-moz-animation: rotateFall 1s both ease-in;
	transform-origin: 0% 0%;
	animation: rotateFall 1s both ease-in;

}
.view2.ng-enter 		{  
    -webkit-animation:slideInRight 0.5s both ease-in;
	-moz-animation:slideInRight 0.5s both ease-in;
	animation:slideInRight 0.5s both ease-in;    
}

View 3 Animations

/* View 3 animations for page leave and enter */
.view3.ng-leave      {
    -webkit-transform-origin: 50% 50%;
	-webkit-animation: rotateOutNewspaper .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: rotateOutNewspaper .5s both ease-in;
	transform-origin: 50% 50%;
	animation: rotateOutNewspaper .5s both ease-in;
}
.view3.ng-enter 		{ 
    -webkit-animation:slideInUp 0.5s both ease-in;
	-moz-animation:slideInUp 0.5s both ease-in;
	animation:slideInUp 0.5s both ease-in;  
}

We are done with all the changes. Now it’s time to run the application

Running the Application

On running the application, you will be presented with the below page:

Click on the links and you will see animations into play, on entering and leaving the partial pages.

There are various other animations that can be used. Also, an overwhelming set of possible effects can be here: http://tympanus.net/Development/PageTransitions/

Download the code and try it yourself

[buttonleads form_title=”Download Code” redirect_url=https://edureka.wistia.com/medias/erx9uep9sa/download?media_file_id=80450196 course_id=283 button_text=”Download Code”]

I hope you liked the above Animation with ngAnimate blog. If you wish to deep-dive into Angular JS, I would recommend you why don’t have a look at our Angular certification Training course page. The Angular JS Certification training at Edureka will make you an expert in Angular JS through live instructor led sessions and hands-on training using real-life use cases. 

Got a question for us? Please mention it in the comments section and we will get back to you.

Related Posts:

Get Started with Angular

Creating an Online Quiz Application using JSP Servlet

Parsing XML files using SAX Parser

Writing RESTful Web Services with JAX-WS