AngularJS (54 Blogs) Become a Certified Professional

Animating AngularJS Apps with ngAnimate

Last updated on Apr 19,2023 14.1K Views

3 / 3 Blog from AngularJS Applications

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

ngAnimate-angularjs-project-structure

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:

angular-view1

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

Upcoming Batches For Angular Certification Training Course
Course NameDateDetails
Angular Certification Training Course

Class Starts on 30th March,2024

30th March

SAT&SUN (Weekend Batch)
View Details
Comments
1 Comment
  • velia says:

    Recent poll demonstrates that approximately 75% people are engrossed into on-line jobs. The internet world-wide has grown into bigger and even better and providing lots of make money online opportunities. Working from home on-line jobs are trending and transforming people’s day-to-day lives. Exactly why it is widely used? Mainly because it lets you do the job from anywhere and anytime. You are able to get more time to allocate with all your friends and can plan out journeys for holidays. Persons are generating great revenue of $28000 every single week by utilizing the efficient and smart techniques. Carrying out right work in a right direction will always lead us in the direction of becoming successful. You will start to earn from the first day at the time you explore our website. >>>>> ACT NOW

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

Animating AngularJS Apps with ngAnimate

edureka.co