Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
About the Author
About the Reviewers

Creating staggering animations

Staggering animations provides a curtain effect; each animation starts with a small delay from the start of the last animation and before the last animation finishes.

Staggering animations are very useful to support the information hierarchy, as it creates a path for the eyes to follow, and it's useful to keep a consistent motion choreography so that the user doesn't get disoriented. Imagine a photo gallery website that might load all photos and show all of them at once or append the photos in a sequence, so the user don't get a lot of information at the same time.

Both points are explained in the Meaningful Transitions section of Google Material Design. Learn more about it at

AngularJS has native support for these animations. It's as easy to create as declaring a .ng-EVENT-stagger CSS definition. This will apply the delay between animations for the EVENT animation, the EVENT being one of...