SVG Animations

Chapter 17. Designing, Prototyping, and Animation in Component Libraries

Our modern frontend workflow has matured over time to include design systems and component libraries that help us stay organized, improve workflows, and simplify maintenance. These systems, when executed well, ensure proper documentation of the code available and enable our systems to scale with reduced communication conflicts.

But while most of these systems take a critical stance on fonts, colors, and general building blocks, their treatment of animation remains disorganized and ad hoc. Fortunately, we can leverage existing structures and workflows to reduce friction when it comes to animation and create cohesive and performant user experiences.

In this chapter, we’ll break down how to design, plan, and implement animations.

Designing an Animation

Animations, like any other facet of the web, must be designed. You can refer to the following articles on Smashing Magazine for details as to why:

• “Functional Animation in UX Design”, by Amit Daliot
• “The State of Animation 2014”, by Rachel Nabors
• “The Guide to CSS Animation: Principles and Examples”, by Tom Waterhouse

As web developers, we think about the effects of typography, layout, interaction, and shifting viewports, but when incorporating animation we have another factor to consider: time.

It’s not just an extra aspect to consider, either: it increases the complexity of each of the aforementioned parameters exponentially. But rather than viewing this ...