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:

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

Get SVG Animations now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.