5 ms·

Learn how to bring animation to your web projects

146 points by donovanh 8y ago

hknd 8y ago
Cool that you open-source a book - it looks like it contains a solid amount of information. Well done! What I'm missing (couldn't find it on the first glance) is a topic about the performance implications of animations. Most devs don't consider which css properties trigger a layout->paint->composite re-render, which has massive influence on browser performance. There are soooo many shitty animations/transitions in the web, just because people don't know that animations can slow down a whole site. Imho people should read something like the web dev one pager on animation performance (1), which explains (more or less) how to build high-performance animations. There is also this free udacity course (2) which explains everything a web developer needs to know. It's not hard nor magic, and you just have to hear it once to remember it for whenever it becomes necessary. 1: https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance https://developers.google.com/web/fundamentals/design-and-ux... 2: https://eu.udacity.com/course/browser-rendering-optimization--ud860 https://eu.udacity.com/course/browser-rendering-optimization...
- the_duke 8y ago
  It's especially bad with the CSS frameworks that people slap on their sites. Various Material UI implementations are notorious here because they have fancy animations everywhere.
  - hknd 8y ago
    ^ this! I've seen so many jquery libraries used on sites to get a quick fancy animation, but then it used something like: setTimeout(() => { element.height += 2; }, 50) Which literally brings a 60+fps page to <5fps on a high-end machine.
- donovanh 8y ago
  Yes, I totally agree! Performance is something I will consider touching on. I wanted to keep it fairly intro-level but the topic would sit well alongside accessibility. Thanks for the feedback!
- Teichopsia 8y ago
  This resource is pretty decent https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 https://medium.com/outsystems-experts/how-to-achieve-60-fps-...
userbinator 8y ago
Just don't be tempted to add all the animations you can think of after reading something like this (similar to what often happens to other developers after reading about design patterns.) If anything, you should probably err on the side of not using animation. (Unless it's a game or such, in which case definitely be more liberal with animating things.)
- dictum 8y ago
  Also, if your app or website has settings, please include a setting for them: no animations | reduce animations | enable all animations. Settings are often maligned in interface design, but they're very important for people who actually use your app often. Instead of forgoing them altogether, ship with good defaults and let the user reset them if things go wrong.
  - Vinnl 8y ago
    There's also an upcoming media query `prefers-reduced-motion`: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility#Reduced_Motion https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...
- rchaud 8y ago
  Agreed. There is the temptation to jam animations into every screen because of the fun novelty effect. But the ultimate effect on your users would likely be visual strain and no small amount of irritation. I wish more of the web had animations, but sometimes it can take a designer's eye to know how to use it effectively. What happens in practice however is similar to when a college freshman discovers transitions and animations in PowerPoint.
rat322 8y ago
Looks cool.
TheAceOfHearts 8y ago
Something important which I think is missing from the accessibility section is a reference to the prefers-reduced-motion CSS media feature [0]. When it was initially released the WebKit team wrote a post [1] explaining its purpose, how to use it, and many practical examples. I'd suggest including a link to their post. It's currently supported by Firefox and Safari [2]. The Chromium team recently began working on it as well [3]. Edge's Platform Status [4] has it marked as a low-priority issue; given the included explanation they'll probably wait for Chromium to finish implementing it and copy them. Please consider taking a minute to vote on the issue if you consider it important. WCAG 2.1 Level AAA requires that animations from interactions have a way to be disabled [5]. I wish more developers would implement this, although in my case it's just because I generally don't care much for animations. There's no mention of springs, which is essential for creating animations that feel natural. I remember having my mind blown when I first learned about these animation techniques. Just knowing they exists lets you expand your toolkit, even if you don't regularly work on UI development. "Creating Animations and Interactions with Physical Models" [6] has a superb explanation. The book references it in passing, but I want to highlight Disney's Twelve Basic Principles of Animation. I was first exposed to them in the wonderful animation: "The illusion of life" [7], and it remains my preferred resource for quickly introducing others to the concepts. They also put up each individual rule as gifs on tumblr [8] if you prefer to skip the video. This is one of those foundational building blocks that you start to notice everywhere after learning about it. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... [1] https://webkit.org/blog/7551/responsive-design-for-motion/ https://webkit.org/blog/7551/responsive-design-for-motion/ [2] https://caniuse.com/#search=prefers-reduced-motion https://caniuse.com/#search=prefers-reduced-motion [3] https://bugs.chromium.org/p/chromium/issues/detail?id=722548 https://bugs.chromium.org/p/chromium/issues/detail?id=722548 [4] https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mediaqueriesprefersreducedmotion/ https://developer.microsoft.com/en-us/microsoft-edge/platfor... [5] https://www.w3.org/TR/WCAG21/#animation-from-interactions https://www.w3.org/TR/WCAG21/#animation-from-interactions [6] https://iamralpht.github.io/physics/ https://iamralpht.github.io/physics/ [7] https://vimeo.com/93206523 https://vimeo.com/93206523 [8] http://the12principles.tumblr.com/ http://the12principles.tumblr.com/
- 8y ago
ausjke 8y ago
other than css tricks, as far as animation is concerned, webp is replacing gif: https://caniuse.com/#feat=webp https://caniuse.com/#feat=webp
id_rsa 8y ago
Thanks for sharing this! I was looking for a resource on CSS animations for a couple web apps I'm working on.

146 points by donovanh 8y ago

hknd 8y ago

Cool that you open-source a book - it looks like it contains a solid amount of information. Well done! What I'm missing (couldn't find it on the first glance) is a topic about the performance implications of animations. Most devs don't consider which css properties trigger a layout->paint->composite re-render, which has massive influence on browser performance. There are soooo many shitty animations/transitions in the web, just because people don't know that animations can slow down a whole site. Imho people should read something like the web dev one pager on animation performance (1), which explains (more or less) how to build high-performance animations. There is also this free udacity course (2) which explains everything a web developer needs to know. It's not hard nor magic, and you just have to hear it once to remember it for whenever it becomes necessary. 1: https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance https://developers.google.com/web/fundamentals/design-and-ux... 2: https://eu.udacity.com/course/browser-rendering-optimization--ud860 https://eu.udacity.com/course/browser-rendering-optimization...

the_duke 8y ago
It's especially bad with the CSS frameworks that people slap on their sites. Various Material UI implementations are notorious here because they have fancy animations everywhere.
- hknd 8y ago
  ^ this! I've seen so many jquery libraries used on sites to get a quick fancy animation, but then it used something like: setTimeout(() => { element.height += 2; }, 50) Which literally brings a 60+fps page to <5fps on a high-end machine.
donovanh 8y ago
Yes, I totally agree! Performance is something I will consider touching on. I wanted to keep it fairly intro-level but the topic would sit well alongside accessibility. Thanks for the feedback!
Teichopsia 8y ago
This resource is pretty decent https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 https://medium.com/outsystems-experts/how-to-achieve-60-fps-...

userbinator 8y ago

Just don't be tempted to add all the animations you can think of after reading something like this (similar to what often happens to other developers after reading about design patterns.) If anything, you should probably err on the side of not using animation. (Unless it's a game or such, in which case definitely be more liberal with animating things.)

dictum 8y ago
Also, if your app or website has settings, please include a setting for them: no animations | reduce animations | enable all animations. Settings are often maligned in interface design, but they're very important for people who actually use your app often. Instead of forgoing them altogether, ship with good defaults and let the user reset them if things go wrong.
- Vinnl 8y ago
  There's also an upcoming media query `prefers-reduced-motion`: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility#Reduced_Motion https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...
rchaud 8y ago
Agreed. There is the temptation to jam animations into every screen because of the fun novelty effect. But the ultimate effect on your users would likely be visual strain and no small amount of irritation. I wish more of the web had animations, but sometimes it can take a designer's eye to know how to use it effectively. What happens in practice however is similar to when a college freshman discovers transitions and animations in PowerPoint.

rat322 8y ago

Looks cool.

TheAceOfHearts 8y ago

Something important which I think is missing from the accessibility section is a reference to the prefers-reduced-motion CSS media feature [0]. When it was initially released the WebKit team wrote a post [1] explaining its purpose, how to use it, and many practical examples. I'd suggest including a link to their post. It's currently supported by Firefox and Safari [2]. The Chromium team recently began working on it as well [3]. Edge's Platform Status [4] has it marked as a low-priority issue; given the included explanation they'll probably wait for Chromium to finish implementing it and copy them. Please consider taking a minute to vote on the issue if you consider it important. WCAG 2.1 Level AAA requires that animations from interactions have a way to be disabled [5]. I wish more developers would implement this, although in my case it's just because I generally don't care much for animations. There's no mention of springs, which is essential for creating animations that feel natural. I remember having my mind blown when I first learned about these animation techniques. Just knowing they exists lets you expand your toolkit, even if you don't regularly work on UI development. "Creating Animations and Interactions with Physical Models" [6] has a superb explanation. The book references it in passing, but I want to highlight Disney's Twelve Basic Principles of Animation. I was first exposed to them in the wonderful animation: "The illusion of life" [7], and it remains my preferred resource for quickly introducing others to the concepts. They also put up each individual rule as gifs on tumblr [8] if you prefer to skip the video. This is one of those foundational building blocks that you start to notice everywhere after learning about it. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... [1] https://webkit.org/blog/7551/responsive-design-for-motion/ https://webkit.org/blog/7551/responsive-design-for-motion/ [2] https://caniuse.com/#search=prefers-reduced-motion https://caniuse.com/#search=prefers-reduced-motion [3] https://bugs.chromium.org/p/chromium/issues/detail?id=722548 https://bugs.chromium.org/p/chromium/issues/detail?id=722548 [4] https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mediaqueriesprefersreducedmotion/ https://developer.microsoft.com/en-us/microsoft-edge/platfor... [5] https://www.w3.org/TR/WCAG21/#animation-from-interactions https://www.w3.org/TR/WCAG21/#animation-from-interactions [6] https://iamralpht.github.io/physics/ https://iamralpht.github.io/physics/ [7] https://vimeo.com/93206523 https://vimeo.com/93206523 [8] http://the12principles.tumblr.com/ http://the12principles.tumblr.com/

8y ago

ausjke 8y ago

other than css tricks, as far as animation is concerned, webp is replacing gif: https://caniuse.com/#feat=webp https://caniuse.com/#feat=webp

id_rsa 8y ago

Thanks for sharing this! I was looking for a resource on CSS animations for a couple web apps I'm working on.