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
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 http://www.google.com/design/spec/animation/meaningful-transitions.html.

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...