MATTERS
IN MOTION
(Or how Rob Lowe should
animate the web)
Rachel Smith
@rachsmithtweets
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
WEB ANIMATION
WENT MAINSTREAM
Rachel Smith
@rachsmithtweets
In 2014
Slide 4
Slide 4 text
BOOM
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
ANIMATION.
SO HOT RIGHT NOW.
ANIMATION
Slide 7
Slide 7 text
Motion design
is difficult
Slide 8
Slide 8 text
User Experience
Design is difficult
Slide 9
Slide 9 text
Front End
Development is
difficult
Slide 10
Slide 10 text
Combining all
three is
CRAZY DIFFICULT
Slide 11
Slide 11 text
HOW DO I USE
ANIMATION IN MY
CLIENT WORK?
Thats a cool demo, but
and how do I do it well?
Slide 12
Slide 12 text
HOW ROB LOWE
SHOULD ANIMATE
THE WEB
Slide 13
Slide 13 text
Forward thinking Rob
Lowe makes motion a
priority.
Overworked and under-
budgeting Rob Lowe tacks
animation on to the end of
the project.
Slide 14
Slide 14 text
Constraints
In the real world web projects have
(budget & timeline)
Stakeholders
Audience
Slide 15
Slide 15 text
HOW?
Slide 16
Slide 16 text
- Priorities
- Project Timeline
- Objectives
- Trade-offs
Different
Slide 17
Slide 17 text
PROPOSAL DESIGN DEVELOPMENT QUALITY ASSURANCE
PROPOSAL
ANIMATION
DESIGN DEVELOPMENT
QUALITY
ASSURANCE
PROTOTYPE
ANIMATION
Typical (simplified) web project timeline
Active Theory web project timeline
Slide 18
Slide 18 text
First Mistake
Start with designing static states
without thought how to gracefully
move between them.
Developers/motion designers need
to be involved from the beginning
Slide 19
Slide 19 text
Time/$$$ for development
prototype
build
cross-browser
testing/QA
accessibility
SEO
animation
Slide 20
Slide 20 text
Time/$$$ for development
prototype
build
cross-browser
testing/QA
accessibility SEO
animation
SOMETHING’S GOTTA GIVE
Slide 21
Slide 21 text
TRADE-OFFS
Prioritizing animation
could mean sacrificing
in other areas.
What is more important in your
project?
Slide 22
Slide 22 text
LOADERS
Slide 23
Slide 23 text
If you can’t allocate resources to
doing web animation well - you
could end up with a worse
experience for your users.
‘Phoning it in’ is dangerous.
Slide 24
Slide 24 text
Managing client expectations
is very important.
Slide 25
Slide 25 text
Talented Rob Lowe uses
interesting animation
timing.
Average Rob Lowe
uses linear motion.
Slide 26
Slide 26 text
Disney’s 12 principles
of animation
Rachel Smith
@rachsmithtweets
Just starting?
Slide 27
Slide 27 text
MASTER EASING
First thing:
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Codrops example
Slide 31
Slide 31 text
TAKE INSPIRATION
FROM REAL-LIFE
MOTION (PHYSICS)
Next level:
Slide 32
Slide 32 text
Use JavaScript to
imitate forces
(gravity, friction)
Slide 33
Slide 33 text
Google Example
Slide 34
Slide 34 text
TRADE SECRET:
LERP
Slide 35
Slide 35 text
Lerp example
Slide 36
Slide 36 text
Careful Rob Lowe uses
restraint and animates
with purpose.
Overzealous Rob
Lowe animates all
the things!!!!
Slide 37
Slide 37 text
ANIMATION IS FOR
COMMUNICATION
NOT
DECORATION
Slide 38
Slide 38 text
Transitions between states
“This is how you
ended up here from
where you before”
Slide 39
Slide 39 text
Introducing new content
“There is new
content being
added to the page
right now”
Slide 40
Slide 40 text
Guiding user journey
“You should click
here next”
Slide 41
Slide 41 text
An overall feeling/message
“This product is
exciting and cool and
modern and you
should totally buy it!”
Slide 42
Slide 42 text
Propel example
Slide 43
Slide 43 text
Web design visual
hierarchy applies to
animations as well!
what do your
animations say?
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Don’t forget that people
have to use your stuff
Motion design for interaction is
not the the same as animation for
video or traditional motion
graphics.
Slide 46
Slide 46 text
Take your initial timing
to complete an
animation and halve it.
TRADE SECRET:
(and maybe even halve it again)
Slide 47
Slide 47 text
“Take one item off before you
leave the house”
Slide 48
Slide 48 text
You might have to remove some
animation
Audience/function
Performance
Motion sickness
Slide 49
Slide 49 text
‘FALLBACKS’
Not as simple as ‘removing the
animation’
How are you going to communicate
the things you were communicating
with the animation?
Slide 50
Slide 50 text
Time/$$$ for development
prototype
build
cross-browser
testing/QA
accessibility
SEO
animation
Slide 51
Slide 51 text
Struggling Rob
Lowe hacks other
people’s JavaScript
together.
Fabulous Rob Lowe
learns how to write his
own JavaScript.
Slide 52
Slide 52 text
Complex, performing animations
can not be ‘plugged in’
Using an animation library
!=
fabulous animated website
Slide 53
Slide 53 text
Common mistakes:
Inefficient JavaScript can kill your FPS
INEFFICIENT RENDER LOOPS
Don’t change properties that cause layout /
repaint in your loop.
AVOID
width
height
margin
padding
top
left
many others…
THESE ARE P COOL
transform
(translate, scale, rotation
opacity
CHECK OUT CSS TRIGGERS.COM
Slide 56
Slide 56 text
Common mistakes:
Inefficient JavaScript can kill your FPS
RENDER LOOPS
EVENT MISMANAGEMENT
Slide 57
Slide 57 text
WHEN SOMEONE ASKS ME
TO MAKE A ‘PARALLAX’ WEBSITE
Slide 58
Slide 58 text
‘LEFT’
I SOLEMNLY SWEAR,
THAT I WILL NOT
UPDATE THE ‘TOP’ OR
PROPERTIES OF
ELEMENTS EVERY TIME
THE SCROLL EVENT
FIRES
Slide 59
Slide 59 text
ENJOYING
ALSO,
RACHEL.
I AM REALLY
THIS TALK
SO FAR. WELL DONE
Slide 60
Slide 60 text
In your
requestAnimationFrame()
When the scroll event fires
Set target
Update to target
consider debouncing
same goes for resize, DeviceOrientation etc
Slide 61
Slide 61 text
Common mistakes:
Inefficient JavaScript can kill your FPS
RENDER LOOPS
EVENT MISMANAGEMENT
MEMORY MISMANAGEMENT
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
BE THAT ROB LOWE!!!
Prioritize animation
Use interesting timing
Animate with purpose
Learn JavaScript
Slide 68
Slide 68 text
That was just a small part of
what I wanted to talk about.
Let’s chat!
Rachel Smith
@rachsmithtweets