Delivering Consistent Animations with a Design System Library

Brett Holcomb
Apr 25 · 6 min read
Sample of animations from the QuickBooks Animation Library
A more complex animation made in After Effects that we shipped using the Lottie-Web JS library
A (somewhat complex) loading spinner built using CSS | CodePen

Inspiration to build a library

How we built it

Animation previews — try them out!
qbal-variables.scss
qbal-keyframes.scss
qbal-animation-classes.scss
qbal-semantic-classes.scss — This also gives us the chance to address accessibility. We know the trowser animation covers a large area of the screen, so we can use the prefers-reduced-motion media query to make it a simple fade.

Options for using the animation library

Warning for CSS minifiers!

Uh oh. Our CSS loading spinner got the wrong keyframes!

Conclusion

Related Work

BLUEprint by Intuit

Thoughts from Intuit on tech, data, design, and the culture that powers today's innovation.

Brett Holcomb

Written by

Design Technologist at Intuit

BLUEprint by Intuit

Thoughts from Intuit on tech, data, design, and the culture that powers today's innovation.