As a JavaScript framework, AngularJS has emerged as a truly amazing tool for building the single page applications. And this single page app structure goes a long way in giving our website the appeal of a native mobile application.
The area where AngularJS truly makes a remarkable difference is that it lets us ad effects like transitions and animations to our page. And for the same, the [code]ngAnimate[/code] module. Serves as the perfect tool. It has already been responsible behind building some awesomely attractive apps and this post will present to you the process that goes into animating the [code]ng-view[/code].
Which Effect are We Creating
We have a single page application with us and the effect we wish to introduce in it is the animated page change, via which, once the link is clicked, the present view slides out and the new view slides in.
During the process, we will use several elements and functions. For the purpose of page routing, [code]ngRoute[/code] will be used. The page animations will be created using ngAnimate. We will then use the CSS Animations property for the pages.
Getting Down to the Action
ngAnimate here will do the job of adding the CSS classes or removing them, depending on whether the user is accessing a view or navigating off from it. On the .ng-enter, we will apply the CSS animation and the same will then be applied when the user enters a view.
Making the beginnings
There are different files that will be involved during the entire process:
- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html
We will first work on our index.html file in which we will pour in the code for AngularJS, implement ngRoute, and use ngAnimate as well.
[cc lang=”html”]
[/cc]
This file is what we need as our HTML as of now. Moving forward, we need to apply the Angular App and for adding the views, the ng-view file will come into the play.
Creating the Angular Application
Moving forward, we are now about to create the Angular app. We will also bring routing into play so that we can move from one page to the other without reloading. Here is the code to be used:
[cc lang=”js”]
// app.js
// define our application and pull in ngRoute and ngAnimate
var app_animated = angular.module(‘app_animated’, [‘ngRoute’, ‘ngAnimate’]);
// ROUTING ===============================================
// set our routing for this application11
// each route will pull in a different controller
app_animated.config(function($routeProvider) {
$routeProvider
// home page
.when(‘/’, {
templateUrl: ‘page-home.html’,
controller: ‘mainController’
})
// about page
.when(‘/about’, {
templateUrl: ‘page-about.html’,
controller: ‘aboutController’
})
// contact page
.when(‘/contact’, {
templateUrl: ‘page-contact.html’,
controller: ‘contactController’
});
});
// CONTROLLERS ============================================
// home page controller
app_animated.controller(‘mainController’, function($scope) {
$scope.pageClass = ‘homepage’;
});
// about page controller
app_animated.controller(‘aboutController’, function($scope) {
$scope.pageClass = ‘about_page’;
});
// contact page controller
app_animated.controller(‘contactController’, function($scope) {
$scope.pageClass = ‘contact_page’;
[/cc]
So, now, we have an app with routing and also the controllers in place. The controllers have their own pageClass variables associated to them which are then applied individually to the ng-view in the index.html file. This way, it is easier for us to have a different animation for different pages.
The Views
We are going to keep the views free of any possible clutter. What we are going to include here is some text and also the navigational links. Here is the code for the same:
[cc lang=”html”]
Angular Animations Shenanigans
Home
Adding some Animation Fun
About
Attractive Animations
Contact
[/cc]
And thus, we have successfully coded our pages. Now, we will integrate them with the index.html file
And Now We Will Animate the App
We will use CSS for the animations we will create from hereon. We really don’t have to make any tweaks to the Angular code and instead, simply apply the CSS animations.
The ngAnimate integrates with ng-view two classes, which are .ng-enter and .ng-leave.
Adding the Base Style
To jazz up our app, let’s add some base style:
[cc lang=”css”]
/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
.pages {
bottom:0;
padding-top:182px;
position:absolute;
text-align:center;
top:0;
width:50%;
}
.pages h1 { font-size:255px; }
.pages a { margin-top:425px; }
/* PAGES (specific colors for each page)
*/
.home_page { background:#897000 color:#902201; }
.about_page { background:#F4F4F4; color:#2B44E1; }
.pages-contact { background:#ffa2ba; color:#781DD3; }
[/cc]
Now that we have the base style for all our pages, let’s move on to delivering the CSS animations
CSS Animations
We will begin with defining the animations and then applying them to each page separately, based on the user’s action of leaving and entering the view. The default CSS attributes will be leveraged.
Here is the code for bringing into effect 4 different animations:
[cc lang=”css”]
/* styling.css */
…
/* ANIMATIONS */
/* leaving animations */
/* rotate and fall */
@keyframes rotateFall {
0% { transform: rotateZ(0deg); }
20% { transform: rotateZ(15deg); animation-timing-function: ease-out; }
40% { transform: rotateZ(10deg); }
60% { transform: rotateZ(21deg); }
100% { transform: translateY(100%) rotateZ(17deg); }
}
/* entering animations ————————————— */
/* scale up */
@keyframes scaleUp {11
from { opacity: 0.3; -webkit-transform: scale(0.8); }
}
/* slide in from the bottom */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(100%); }
to { transform: translateX(0); }
}
/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
[/cc]
Applying the Animations to the Pages
Now, we will apply the animations to .ng-enter and .ng-leave for making them active on the pages:
[cc lang=”css”]
/* styling.css */
.ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 1111; }
.ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 5555; }
[/cc]
Finally, we have made sure the application animates the way we want them to. When visitors leave, the pages will slide out, and scale up when they enter.
Wrapping Up
Concludingly, it can be said that applying animations to Angular application is not at all a tough task. I hope it does answer a whole lot of questions that have been roaming restlessly in your mind!
