Course info
Apr 15, 2015
1h 57m

This course demonstrates how to incorporate animation into AngularJS applications to bring new life to an app. The course will cover ngAnimate, the official AngularJS module for animation. ngAnimate makes it easy to use CSS transition and animations or JavaScript animations. You will also learn how to create custom animations and add animation support to custom directives. Lastly, you will learn how to debug and test animations.

About the author
About the author

Kevin Weeks is a designer turned software engineer who is constantly learning new things. He is a CSS expert who is passionate about frontend development. He loves helping others learn through speaking, blogging, and contributing to the open source community.

Section Introduction Transcripts
Section Introduction Transcripts

Getting Started
Hey, everyone, this is Kevin Weeks here. Today, we are going to learn about animating Angular apps. Animation is increasingly becoming a requirement, not simply an enhancement, for high-quality web applications. Subtle animations make the app feel more professional, polished, and delightful to the user, and Angular makes it incredibly easy to get started. Before we start, there are a few things you should know to get the most out of this course. This is an intermediate level course and assumes a very basic knowledge of AngularJS. If terms like module, directive, and Jasmine are unfamiliar to you, you should consider watching an introductory course on AngularJS before beginning this course. You should also have a very basic knowledge of CSS, although this is not a hard requirement. The course will cover some animation libraries that allow you to utilize stock animations without ever having to write a line of CSS. Let's jump right in.

Animating Core Directives
Welcome to module two of this course. In this module we'll learn about the core Angular directives that support animation. We'll add animation to these directives using ngAnimate's class name syntax and learn about CSS transitions and keyframe animations. CSS is the most performant way to add animation to our components, so whenever possible we will use CSS. Let's get started. There are a number of core Angular directives that support animation. They are ngClass, ngView, ngInclude, ngSwitch, and ngIf, ngRepeat, ngShow, and ngHide, forms, and ngModel, and ngMessages. We will go through each directive, learn about the class name syntax for adding animation, and work through an example of each.

Animating Custom Directives with CSS and JavaScript
Welcome to module three of this course. In this module, we'll be adding animation support to our custom directives. We'll setup our custom directive with CSS and JavaScript animations, and we'll also use the most popular third party libraries for animating with CSS and JavaScript. To add animation support to our custom directives, we need to use the dollar sign animate service. According to the Angular docs, $animate provides animation support while manipulating the dom. This is the service that the Angular core directives, that support animation, use internally. For instance, ngRepeat makes calls to $animation. enter,. leave, and. move in the Angular source code.

Debugging and Testing Animations
We are now on the final module of this course. In the previous modules we setup ngAnimate and incorporated animations into our app. Now we're going to look at debugging and testing our animations. When it comes to debugging animations, we have some significant challenges and limitations. As animations get more complex, we can have multiple moving parts that need to fit together like puzzle pieces. It can be difficult to identify exactly why a problem exists and how to address it. Although possible, it is difficult to pause or step through animations to identify areas that need improvement. And with Angular, we may even have dom elements being added and removed and want to avoid refreshing the page every time we want to test an animation. Let's take a look in the browser to see how we can address some of these issues.