
Learn how to bring animation to your web projects - donovanh
https://github.com/cssanimation/css-animation-101
======
hknd
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...](https://developers.google.com/web/fundamentals/design-and-
ux/animations/animations-and-performance) 2:
[https://eu.udacity.com/course/browser-rendering-
optimization...](https://eu.udacity.com/course/browser-rendering-optimization
--ud860)

~~~
the_duke
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
^ 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.

------
userbinator
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
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
There's also an upcoming media query `prefers-reduced-motion`:
[https://developer.mozilla.org/en-
US/docs/Web/CSS/Media_Queri...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility#Reduced_Motion)

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

------
TheAceOfHearts
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/pref...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-reduced-motion)

[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/platfor...](https://developer.microsoft.com/en-us/microsoft-
edge/platform/status/mediaqueriesprefersreducedmotion/)

[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/)

~~~
donovanh
Thank you for the links and feedback. I will revisit the accessibility section
with this new information.

------
ausjke
other than css tricks, as far as animation is concerned, webp is replacing
gif:

[https://caniuse.com/#feat=webp](https://caniuse.com/#feat=webp)

------
rat322
Looks cool.

