Live data from Hacker News

Learn how to bring animation to your web projects

github.com

11–15 of 15 posts

Re: Learn how to bring animation to your web projects

#11
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...

[1] https://webkit.org/blog/7551/responsive-design-for-motion/

[2] https://caniuse.com/#search=prefers-reduced-motion

[3] https://bugs.chromium.org/p/chromium/issues/detail?id=722548

[4] https://developer.microsoft.com/en-us/microsoft-edge/platfor...

[5] https://www.w3.org/TR/WCAG21/#animation-from-interactions

[6] https://iamralpht.github.io/physics/

[7] https://vimeo.com/93206523

[8] http://the12principles.tumblr.com/

Re: Learn how to bring animation to your web projects

#12

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.)

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.

Re: Learn how to bring animation to your web projects

#15

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 a…

Thank you for the links and feedback. I will revisit the accessibility section with this new information.
Post reply on HN