On UI Animations


Thanks Paco for bringing up this great topic, and creating the outline of this article while we brainstorming the animation part of our design system. Here're some personal notes that I think worth writing down.

Common Transition Values as Design Tokens

Using CSS variables for animations will be very helpful for most of our use cases. I personally prefer ease with a small duration (~200ms) as the CSS transition setup, but we can define our own easing function too as design tokens.

Transitions in Contexts

There are two types of transitions:

A. Styles (opacity, color, background, shadow, border, transform, etc.)

When changing a style, the animation should be subtle and should serve the purpose of noticing the user that, something appears, disappears, changes, or simply showing that it is interactable.

That covers most of our elements such as popover, tooltip, menu, button, link, modal. And in which case we should simply use pre-defined CSS variables (tokens) as their initial/target values.

B. Layouts (top, left, bottom, right, height, width, etc.)

When changing the layout, we usually want to show the logic of the UI to the user, to give them a sence of the connection between some elements. If the content is hidden inside a foldable, we use expand/collapse animations to build the UI structure. If the content is hidden inside a menu layer, we use slide in/out animations to imply the UI hierarchy.

Things with fixed layouts (hence the animations will have fixed durations and ranges) should be crafted case by case. e.g.: feedback input and toast.

For things with unpredictable layouts (mostly with dynamic contents), e.g.: file tree, collapse, show more, drawer..., there're 2 challenges with CSS:

The best choice is to use spring-based animations (e.g.: react-spring, react-motion) with ResizeObserver to measure and animate the layout changes responsively.

When Is No Animation Desirable?

Twitter · GitHub · Instagram · g@shud.inCC BY-NC 4.0 © Shu Ding.RSS