A presentation at ScriptConf in in Linz, Austria by Lisi Linhart
Practical Web Animation Lisi Linhart
Title Text
Title Text
the user Title Text
the user Title Text the browser
all kinds of experiences Title Text
Animation with the Browser
4 things a browser can animate cheaply
4 things a browser can animate cheaply position translateX(-10px);
4 things a browser can animate cheaply position scale translateX(-10px); scale(0.5);
4 things a browser can animate cheaply position scale rotation translateX(-10px); scale(0.5); rotate(-25deg);
4 things a browser can animate cheaply position scale rotation opacity translateX(-10px); scale(0.5); rotate(-25deg); opacity: 0.5;
order matters transform properties can be chained
codepen.io/danwilson/pen/eEYdgo
this is not performant
use the transform property šŖ
Rendering Performance Javascript / Event
Rendering Performance Javascript / Event Style Recalculations width, margin, left, .. Layout
Rendering Performance Javascript / Event Style Recalculations Layout Paint background, box-shadow, outline, ..
Rendering Performance Javascript / Event Style Recalculations Layout Paint Composite transform, opacity ..
Rendering Performance Javascript / Event Style Recalculations Layout 1 frame Paint Composite
translateX(-10px); opacity: 0.5; try to limit yourself to CSS transform & opacity for most animations
promote elements to new layers if animated often & constantly
Creating new layers
Creating new layers 1. will-change property 2. 3D Transform 3. animated 2D transforms 4. being on top of a compositing layers 5. animated CSS filters
š¤Æ donāt create too many layers remove them if the animation is finished
DevTools
inspect & test your animations in your devtools
Javascript / Event Style Recalculations Layout Paint Composite
Animation for the User
ORIENTATION & TRANSITIONS
Title Text
ORIENTATION & TRANSITIONS 1 help with reorientation in the user 2 explain relationships between different information spaces
ORIENTATION & TRANSITIONS Example: WAAPi
Title Text codepen.io/lisilinhart/pen/vYYLoQg
click button to start transition Title Text codepen.io/lisilinhart/full/pmYBva animate element Out and wait for animation to finish
Title Text codepen.io/lisilinhart/full/pmYBva animate new element in once the animation finished
WAAPI Transitions elements become visible once we click the correct link
WAAPI Transitions call animation function once a link is clicked
WAAPI Transitions get the element thatās currently visible animate it out wait for animation to finish animate new element in
WEB ANIMATIONS API keyframes object or array: stages of the animation timings object: how itās animated (e.g. speed, delay, ..)
WAAPI KEYFRAMES keyframes object keyframes array
WAAPI TIMINGS OBJECT ORIENTATION & CONTEXT how fast should my animation run, how often should it run, what should happen after itās finished?
CSS VS WAAPI CSS Animation
CSS VS WAAPI ORIENTATION & CONTEXT CSS Animation Waapi Animation
WAAPI EXAMPLE defining what should be animated
WAAPI EXAMPLE defining timing of animation
WAAPI EXAMPLE calling the animations
WAAPI EXAMPLE doing something else once animation is finished
Title Text codepen.io/lisilinhart/pen/GRRrYLj
WAAPI EXAMPLE create a dynamic, adapting animation via a function
WAAPI EXAMPLE hand some logical parameters to the animation function
Title Text codepen.io/lisilinhart/pen/GRRrYLj
WHY THE WEB ANIMATIONS API? ā¢ ā¢ ā¢ API provided by the browser ā¢ ā¢ choreographed & chained animations no extra Javascript code like for libraries can render animations over the compositor thread a native & more powerful alternative to CSS animations
JUNE 2019
OCTOBER 2019
WPT.FYI/RESULTS/WEB-ANIMATIONS
ATTENTION & FEEDBACK
FEEDBACK āFeedback indicates causation between two or more events, often used to connect a userās interaction with the interfaceās reactionā Rachel Nabors - Animation at Work
FEEDBACK I recognised that you clicked this button giving a reaction to user input
FEEDBACK I recognised that you clicked this button giving a reaction to user input You entered some information, but itās not correct cause & effect of the users input
FEEDBACK I recognised that you clicked this button giving a reaction to user input You entered some information, but itās not correct cause & effect of the users input You submitted the form, but our system is still processing it making system activity visible
codepen.io/davidkpiano/full/WKvPBP/
ATTENTION
ATTENTION To get to the next step, click this prominent item showing possible actions
ATTENTION To get to the next step, click this prominent item showing possible actions We created this explanatory animation in order for you to better understand our process teaching the user about a process, storytelling
ATTENTION To get to the next step, click this prominent item showing possible actions We created this explanatory animation in order for you to better understand our process teaching the user about a process, storytelling You had to read a lot of information, so we added this kitten animation to entertain you adding fun and reinforcing branding
Title Text stripe.com/us/payments
ATTENTION & FEEDBACK Reactive Animation
āA reactive animation is one involving discrete changes, due to events.ā Conal Elliott
read here
JS + CSS VARIABLES the final demo
JS + CSS VARIABLES setting a CSS Variable via JS
JS + CSS VARIABLES using the set variables in your CSS
Title Text codepen.io/lisilinhart/pen/YzzqGNX
JS + CSS VARIABLES get the elements for setting the variables on and define a variable for the requestAnimationFrame
JS + CSS VARIABLES define EventListener and calculate X & Y from event values that are pixels
JS + CSS VARIABLES update DOM inside requestAnimationFrame
REQUESTANIMATIONFRAME FRAME FRAME FRAME FRAME we continuously want to update the screen and get as many frames as possible FRAME
REQUESTANIMATIONFRAME FRAME FRAME rAF(update) FRAME rAF(update) FRAME rAF(update) FRAME rAF(update) so we update once before each new frame
REQUESTANIMATIONFRAME mousemove FRAME FRAME rAF(update) FRAME rAF(update) FRAME rAF(update) FRAME rAF(update)
REQUESTANIMATIONFRAME mousemove FRAME mousemove FRAME rAF(update) FRAME rAF(update) FRAME rAF(update) FRAME rAF(update)
REQUESTANIMATIONFRAME mousemove mousemove FRAME mousemove FRAME rAF(update) mousemove FRAME rAF(update) mousemove FRAME rAF(update) we update the next frame only with the latest value FRAME rAF(update)
JS + CSS VARIABLES set CSS Variables and reset requestAnimationFrame when done
JS + CSS VARIABLES
JS + CSS VARIABLES rotate panel according to the variables
MATRIX 3D ????
I got you MATRIX 3D ????
meyerweb.com/eric/tools/matrix/
MATRIX 3D The matrix3d() function is an alternative to the three dimensional transform functions rotate3d(), rotateX(), rotateY(), rotateZ(), translate3d(), translateZ(), scale3d(), scaleZ(), and perspective().
MATRIX 3D doesnāt need perspective on parent needs perspective on parent
MATRIX 3D doesnāt need perspective on parent without perspective
Title Text codepen.io/lisilinhart/pen/YzzqGNX
JS + CSS VARIABLES ā¢ easily debuggable ā¢ no excessive DOM manipulation ā¢ DOM node independent ā¢ great if you animate multiple child elements ā¢ great for reactive & physics animation ā¢ Transform: Individual Properties
Timing Animation Principles Easing
TIMING valhead.com/2016/05/05/how-fast-should-your-ui-animations-be
TIMING slow transitions are less distracting fast animations are more likely to attract attention valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/
EASINGS.NET
EASINGS.NET
EASING easeOut feels more reactive and instantaneous
EASING easeOut feels more reactive and instantaneous needs more time, because itās a more complex curve
EASING when an element is moving into the screen it should start quick and slow down towards the center
EASING when an element is moving out of the screen it should start slow and speed up towards the end
Opportunities for Animation
make idle time more useful and interesting Opportunities for Animation
make idle time more useful and interesting guide the user in a process Opportunities for Animation
make idle time more useful and interesting guide the user in a process Opportunities for Animation explain relationships in the information space
make idle time more useful and interesting guide the user in a process Opportunities for Animation get the users attention explain relationships in the information space
Animation Resources
Animation Resources Animation At Work - A Book Apart Book by Rachel Nabors
Animation Resources Animation At Work - A Book Apart Twitch Channel by David Khourshid & Stephen Shaw keyframe.rs Book by Rachel Nabors
Animation Resources Animation At Work - A Book Apart Twitch Channel by David Khourshid & Stephen Shaw keyframe.rs Book by Rachel Nabors animationatwork.slack.com Slack Channel to get feedback & inspiration
Animation Resources Animation At Work - A Book Apart Twitch Channel by David Khourshid & Stephen Shaw basics to know about animation keyframe.rs Book by Rachel Nabors animationatwork.slack.com developers.google.com/web/ fundamentals/design-and-ux/animations/ Slack Channel to get feedback & inspiration
āUsers should only notice your animation if you need to attract their attention in that moment. Otherwise, micro-interactions and other transitions should be so seamless, users donāt even notice that there is animationā Heather Daggett - Animation At Work
Animate for the user, donāt create obstacles,
Lecturing @ LISILINHART.INFO Twitter @LISI_LINHART Blog
Web Animation is an essential part of great user experience leveraging cognitive load and allowing us to provide user feedback. This talk examines Web Animation from a practical standpoint, answering when to use it, how to keep your animations performant from a browser standpoint and exploring the animation options we have on the web today.
The following resources were mentioned during the presentation or are useful additional information.
Hereās what was said about this presentation on social media.
for free. You
can too.