With cartoonist turned web developer Rachel Nabors!
Follow along at share.RachelNabors.com/animationpower
Originally started at Disney while working on Snow White.
Now adopted by film, interaction, comics, anything that involves time and teams.
Example storyboard for a music video: RachelNabors.com/css-amv-talk/storyboard
Rogue's walkcycle kindly provided by master character designer and animator Steven K. Gordon.
animation: walk-cycle 1s steps(12) infinite;(also, the keyframes and the sprite)
animation: <name> <duration> <timing-function> <iteration-count>;
Technique developed in Japan and by Hanna-Barbera to bring cartoons to TV rapidly.
See also The Importance of Yogi's Collar
Scene transitions signal to audiences a change in mood, time, or location (or sometimes just a commercial break!)
Think of them like a period between sentences or a space between paragraphs.
See the Pen The Black Brick Road of OZ, #11 by Rachel Nabors (@rachelnabors) on CodePen
I ended up using a big background image that I shrank to fit using
Parallax is when multiple background layers are moved at different speeds to imitate how views change when moving.
Required the multiplane camera invented by Ub Iwerks in 1933.
Check out this Pen!
You can do it with 3D transforms, too!
In animation, “timing functions” are called “cushioning”
Science! A falling ball picks up speed due to gravity. A rolling ball slows down from friction. How could science apply to UI design?
See the Pen Rolling a Ball with CSS Transitions by Rachel Nabors (@rachelnabors) on CodePen
cubic-bezier(ROLL YOUR OWN!)
With these skills, you can build all kinds of nifty interactions, like this or this.
More examples and slides at RachelNabors.com & on my screencast, TheInfiniteCanvas.com
My master class workshop on animations is at Frontend Masters.