ngConf 2015: ngAnimate Crash Course

Intro

I recently had the privilege of doing four animation workshops at ngConf 2015 and I wanted to post my slides and exercises for everyone to use. The format was an ngAnimate crash course for the attendees who had never used the module and then three progressively harder challenges. My goal was to give the attendees three useful projects that they could use as a reference point for their own work. Please feel free to jump in and fork the plunks, pull down the repository, and work through the instructions in the README files.

If you come up with something totally awesome then post it in the comments for valuable prizes. By that I mean “valuable” prizes!

A huge shout out to my BFF and partner-in-crime at Udacity, Scott Moss for being my assistant for the day. He wrote the super awesome ngFix library which is really solid!

The Slides

Challenge One

In this introductory challenge, the goal is to recreate and then extend the CSS transition animation that exists on the form.

Challenge Two

In this challenge, the goal is to choose the type of animation you would like to do and then create your own animation.

Challenge Three

The Code The Starter Website

In this challenge, the goal is the same as the second challenge but with a slightly larger scope to play with. I used $broadcast to synchronize the two animations in this example and the first person who creates a version that uses promises to accomplish the same effect DOES win a prize! 3 2 1 go!