AngularJS animation examples Part 1

Web apps look better with animations. If you want to start off quickly with simple animation just read my 5 min tutorial on CSS animations. In real life however you will probably have to integrate animations in applications a bit more complex like for example an Angular JS application. In this post I will try to show you some AngularJS animation examples.

I will use the following tools for building my animation examples:

• AngularJS – the framework in question
• AngularJS Animate module – this is the module for animations in Angular; it comes as a separate module that you have to add when using AngularJS animations;
• FontAwsome – this is a webfont framework; I’m just using this for icons in the examples

Let’s get started with our first AngularJS animation example.

Simple Angular JS animated side menu example

In this animation example I will show you how to quickly implement an animated side menu using Angular JS animation.

And the source code:

I’ve setup a typical Angular application and created a fake side menu. I used the hamburger icon as a trigger for the animation. If you click on that the side menu slides and hides to the left, if you click the icon again it comes back.

So, considering you have a similar Angular application, here’s how to setup the AngularJS animation for the side menu:

1. Add the Angular Animate module to your HTML by adding

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.js"></script>

2. Add ngAnimate as a dependecy to your application Angular module the same way I did in the JavaScript file

var app = angular.module("app",["ngAnimate"]);

3. In HTML, for the side menu element I added the ng-class attribute. This basically sets a class on the element based on the truthfulness of a variable you pass in.

So, adding

<div class="sidebar-menu" ng-class="{'menu-closed':closed}">

means that the side menu gets the class menu-closed when the variable in the current scope named closed is true. In the JavaScript file, I toggle the variable  closed between true and false when the hamburger icon is pressed by calling the function toggleSideMenu.

Now, for the animation part

4. First thing to note about ngAnimate (Angular animations) is that it will look for class changes on HTML element and add extra class names to them according to the stage of the change. In our case, when the closed variable changes to true, and the menu-closed class name is added to the element, it also adds the class name menu-closed-add. It does that only for an instant, and them removes the class menu-closed-add. Why is this important? Because, we can use this class to hook in our animation sequence.

That’s exactly what I did in the animation example above. Look below the CSS comment

/*Angular JS Animation examples by coding-dude.com*/

I’ve set the transtion attribute for all properties on the menu-closed-add class. This activates the animation for when the side menu is closing. menu-closed-remove class is the equivalent class added by Angular Animate when the class is removed. So, I added the same transtion attribute such that the animation also happens when the menu is opened.

5. Finally, the CSS class menu-closed-active is the class set by Angular Animate when the element has finished adding the class. So, for this class and also for the menu-closed we add the left position to -110px to hide the menu when closed.

Now you know how to add AngularJS animations to your projects. In the next part we will look into more advanced animations for AngularJS, namely animations for dynamically adding and removing elements to the screen.