As designers and developers, we’re always searching for ways to produce interfaces that are simpler, more performant, and more fun for our users. Of these three factors, the former two have come a long way in terms of research and coverage over the past few years. The third, however, encompasses newer territory: interactions and visual flourish whose primary intent is to delight and instill a sense of fulfillment in your users. UI animations are a wonderful way to imbue your website or application with these qualities.

In the overall timeline of web design and development, animation is still a relatively new subject — it’s only within the past few years that we’ve had wide enough browser support to consider using CSS-based animations, rather than the JS-based solutions we’d been using previously (I’m sure we all recall the days of using jQuery to manipulate CSS properties and achieve animation effects). Now that we’re able to employ CSS animations at a larger scale, we’re finding that there’s widespread need to develop techniques to manage these animations, particularly for two high-level use cases:

Sequential (or “stacked”) animations (e.g., a button that slides into view, then increases slightly in size, then morphs from a square into a circle before finally settling into place) Concurrent animations (e.g., a masthead that collapses vertically in size while buttons inside it change color and a logo element inside it grows in size before settling into place)

We’ll make the assumption that each of these approaches is being applied to one top-level element — that is, a masthead, card, panel, button, or other element consisting of any number of child elements.

Now, there are a variety of tools and guidelines used with respect to approach #1 — sequential animations seem to be a subject that’s often tackled when it comes to UI animation. The desire to animate one top-level element from one state, to another, to another is paramount to creating complex, multi-step animations that contribute to a lively, interesting user interface.

We’re not discussing sequential animations here.

Concurrent animations haven’t received the same level of coverage and exploration that sequential animations have. One can surmise that this is primarily for two reasons:

Sequential animations are a more commonly-tackled problem that apply to a broader set of UI-related tasks Managing concurrent animations is more convoluted and doesn’t lend itself as cleanly to clear, pragmatic solutions

Let’s discuss #2 and build some pathways towards elegant management of concurrent animations.