crafting animation on the web
DESCRIPTION
TRANSCRIPT
Hello
Benjy Stanton(@benjystanton)
by Mayoral
Appointment
About Me
Mario Paint
© Nintendo
“The Nativity”by Benjy Stanton
Designer by Day
Crafting Animation
on the Web
F***h
Animation is Immature
Animation as aDesign Material
“The addition of movement to a [web] experience can provide clarity,
information about context and, frankly, a dash of joy and fun.”
Rachel Hinman
Clean and Simple
The Time is Right
AnimationPrinciples
“Animation is the rapid display of a sequence of
images to create an illusion of movement.”
“...a bestowing of life.”
Timing and Spacing
Easing
Ease Out
Ease In
Anticipationand Reaction
1. Tell them what you’re going to do.2. Do it.3. Tell them that you’ve done it.
Testing
AnimadeLernz
CSS3 Animation
@Keyframes Ruleand
Animation Property
0% 25%50%75%100%
{ color: crimson; }{ color: sandybrown; }{ color: gold; }{ color: lawngreen; }{ color: steelblue; }
name:duration: timing-function:delay:iteration-count:direction:
name:duration: timing-function:delay:iteration-count:direction:
matthewlein.com/ceaser/or
cubic-bezier.com
“Easing is one of those things that web designers don’t talk about enough.”
Val Head
timing-function: steps(10);
© Nintendo
© Nintendo
24ways.org/2012/flashless-animation/
by Rachel Nabors
minimalmonkey.com
Workflow
Animation Identity
Credit: Steve Karg
Notes
Show and Tell
Act!
Storyboard
Animatics(Moving Storyboards)
KeynotePhotoshopEdge AnimateAfter Effects
After Effects
Conclusion
Think of animation as a design material, not
a piece of content.
Use it to communicate more, without adding
clutter to your designs.
Use animation to give each project a unique personality.
Animation is distracting, be mindful of people’s attention.
Further Reading
Transitional Interfacesby Pasquale D’Silva
(on Medium)
A New Mobile UX Design Material
by Rachel Hinman
(on Smashing Magazine)
Flashless Animationby Rachel Nabors
(on 24 Ways)
Better Navigation Through Proprioception
by Cennydd Bowles
(on A List Apart)
The Animator’s Survival Kitby Richard Williams
(on good ol’ fashioned paper)
Thank You