How to Animate the Applications Based on AngularJS

  • Rick
  • 0
  • Feb 25, 2015
  • Tutorial

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.

Angular Animate

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 ngAnimate 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 ng-view.

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

Angular Animate

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.

<!-- index.html -->
<!-- apply our angular app -->
<body ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>
       
</body>

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:

AngularJS

// 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';
// 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';

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:

Angular Animations Shenanigans

Home

About Contact

Adding some Animation Fun

About

Home Contact

Attractive Animations

Contact

Home About
<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-about.html -->
<h1>Adding some Animation Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-contact.html -->
<h1>Attractive Animations</h1>
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

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:

/* 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; }
/* 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; }

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.

CSS3 Animation

Here is the code for bringing into effect 4 different animations:

/* 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); } }
/* 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); }
}

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:

/* 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; }
/* 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; }

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!

Related Posts

Written by Rick

Rick Brown is a veteran iOS apps developer for Mobiers Ltd - a reputed mobile application development services provider. You can get in touch with him, in case, you are wiling to explore more about the iPhone developing tips and tricks.

View all posts by: