Practical Web Animation

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