A presentation at ffconf in in Brighton, UK by Lisi Linhart
Practical Web Animation Lisi Linhart
Lecturing @ LISILINHART.INFO Twitter @LISI_LINHART Blog
Title Text the user
Title Text the user the browser
Animation for the Animation with the User Browser orientation attention feedback perceived performance perception
Animation for the Animation with the User Browser orientation web standards attention render engines feedback CSS vs. JS perceived performance performance perception devices
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;
this is not performant
use the transform property 💪
order matters transform properties can be chained
codepen.io/danwilson/pen/eEYdgo
Rendering & Property Changes Javascript / Event
Rendering & Property Changes Javascript / Event Style Recalculations width, margin, left, .. Layout
Rendering & Property Changes Javascript / Event Style Recalculations Layout Paint background, box-shadow, outline, ..
Rendering & Property Changes Javascript / Event Style Recalculations Layout Paint Composite transform, opacity ..
Rendering & Property Changes 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
Removing layers
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: VueJS Transitions
Title Text codepen.io/lisilinhart/full/rqRvxJ/
VueJS Transitions view is toggled when a button is clicked
VueJS Transitions component is transitioned in if view is the correct value
VueJS Transitions
VueJS Transitions
VueJS Transitions
VueJS Transitions
Title Text codepen.io/lisilinhart/full/rqRvxJ/
PERCEIVED PERFORMANCE
“Human perception of time is fluid, and can be manipulated in purposeful and productive ways.” Chris Harrison Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations
Chris Harrison, Zhiquan Yeo, Scott E. Hudson Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations animated progress bars reduced the perceived duration among the participants by 11%
PERCEIVED PERFORMANCE 0.1 seconds 1 second 5-10 seconds feels instantaneous user will feel the pause struggle to maintain the user’s attention Jakob Nielsen - Usability Engineering
Title Text tomswholesomefood.com.au
PERCEIVED PERFORMANCE The page is loading activity & progress indication Here is a skeleton screen of what content is being loaded Lazy loading & hinting While you’re waiting, here is some more information on how the process works using idle times to inform the user
PERCEIVED PERFORMANCE Example: Web Animations API
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 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 CSS Animation Waapi Animation
Title Text codepen.io/lisilinhart/pen/XxGqqx
WAAPI EXAMPLE animated cursor title element with the text clip-path for text in order to animate transform: scaleX(0)
WAAPI EXAMPLE clipping of text repeating the titles text with the CSS content property
WAAPI EXAMPLE getting the elements same duration for both animations
WAAPI EXAMPLE calling the animations
Title Text codepen.io/lisilinhart/pen/XxGqqx
WAAPI CONTROLS .animate() returns an animation object speeding up the animations when we click the title
Title Text codepen.io/lisilinhart/pen/rqgPNd
WAAPI CONTROLS
WAAPI CALLBACKS
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 (no JS stalling) a native & more powerful alternative to CSS animations
Title Text codepen.io/vincentriemer/pen/vpLrWg
good news for safari 🎉 no edge yet 😔
good chances that it’s coming
polyfill for wider browser support https://github.com/web-animations/web-animations-js/tree/master
ATTENTION & FEEDBACK
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
JS + CSS VARIABLES
JS + CSS VARIABLES
JS + CSS VARIABLES CSS Variables are inherited from their parent, for better performance set them at the most specific level
Title Text 2018.ffconf.org
Title Text codepen.io/lisilinhart/pen/RqwZgg
JS + CSS VARIABLES a layer for each element that’s animated separately
JS + CSS VARIABLES values need to be between 1 and -1 for easier usage in CSS the css variables are set on the parent element, so all child elements have access to them
JS + CSS VARIABLES multiplying the variable between -1 and 1 with the value it should be moved around
Title Text codepen.io/lisilinhart/pen/RqwZgg
JS + CSS VARIABLES • easily debuggable • no excessive DOM manipulation • DOM node independent • great for reactive & physics animation • Transform: Individual Properties
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
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 uianimationnewsletter.com inspiration for UI animation
“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,
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.
for free. You
can too.