In this full-day workshop, web animations expert Rachel Nabors imparts all her knowledge of CSS Animations and Transitions through a series of fun and illuminating hands-on exercises and moves on to explain when and how to use these new animation powers to "plus" your user's experience.
Part I: CSS Animations and Transitions
In the first half of the day, you will learn to:
Master CSS Animations and Transitions
Create performant animations
Animate spritesheets with only a few lines of CSS
Create your own custom timing functions
Troubleshoot animations and their performance with the latest browser tools
Use cutting edge dev tools to inspect and tweak animations and transitions
Part II: Animation and UX Principles
In the second half of the day, Rachel pulls from her deep knowledge and experience with UI animation to explain:
The science behind the human visual system and how animation taps into our brain's innate processing power
How animation made the iPhone--and other touch-based interfaces–possible
The five applications of animation to user interfaces and how they apply to your own projects
When to start planning for motion in your process and what tools to reach for
How and when to increase animacy to increase the perceived speed and visual hierarchy of a design component
Best practices and gotchas for dealing with users with vestibular disorders.
You will need
Some knowledge of CSS
Class starts at 9am, breaks for lunch on your own, and ends at 5pm.