with Rachel the Great (aka Rachel Nabors)
I am Rachel the Great Nabors
You can still read the comic adventures of Rachel and Tuna at RacheltheGreat.com
My new canvas
Now I tell stories using my front-end development skills at my company, TinMagpie.com
Assumptions! We have them!
- We're using Chrome, but these animations will work in all recent browsers plus IE 11 (and 10-ish).
- Using -prefix-free instead of adding vendor prefixes.
- For production I recommend Sass (I work on a gem for that, aka Animation Studio)
Prototyping with the 4th dimension
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
- Storyboards will save you time
- Help you figure out your timing later.
- Bird's eye view.
- Let's you break down a project to distribute among teams.
The “Hello, world!” of animation
Rogue's walkcycle kindly provided by master character designer and animator Steven K. Gordon.
Walkcycles with CSS
- The magic is all in
animation: walk-cycle 1s steps(12) infinite; (also, the keyframes and the sprite)
- ...which breaks down to
animation: <name> <duration> <timing-function> <iteration-count>;
Cutting Corners with “Cut-outs”
Technique developed in Japan and by Hanna-Barbera to bring cartoons to TV rapidly.
(See 1:04)
See also The Importance of Yogi's Collar
Changing Mindsets and Changing Scenes
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.
Parallax in Animation
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.
Cushioning, Easing, Timing Functions
“Cushioning” in Animation
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?
Why animating in the browser kicks ass
- It's familiar. You have and know the tools already.
- It's the future. Working with advanced techniques forces a deeper understanding.
- It's fun. Isn't that enough?
- Content != copy. CSS can be used to tell visual stories, not just set line-heights.
Just the Beginning!
With these skills, you can build all kinds of nifty interactions, like this or this.
←
→
/
#
