quiickbooks animation logo

QuickBooks Animation Library

CSS and SCSS for adding animation to your project.

This library shares an approach to implementing and systematizing motion on the web. If you are an Intuit employee, refer to our design system for more detail on motivation and rationale.

CONTENTS

  1. Animation classes
  2. Transition classes
  3. Examples + semantic classes
  4. GitHub repo

ANIMATION CLASSES

These animations will play as soon as the class is added.

Entrances

Exits

TRANSITION CLASSES

These classes apply easing and timing when the specified property changes.

qbal-transition-width
qbal-transition-height
qbal-transition-opacity
qbal-transition-color

In the example to the right, each card's content container has the qbal-transition-height class applied.

React code for the accordion example

EXAMPLES + SEMANTIC CLASSES

View semantic mappings in: /scss/_semantic-classes.scss

Modals

Right drawer and dialog modal also add a 60% opacity black overlay with animation classes qbal-overlay-enter and qbal-overlay-exit on enter and exit respectively.



Notifications & tooltips

The tooltip and coach mark should have transform origin set to the corner closest to the "pointer". Below, the tooltip has: transform-origin: bottom left;



Reveal options



Content transitions


qbal-tabContent-enterincludes a delay so that the content enters after the previous tab has exited.

Typically items will only stagger when entering and then exit together because we want to focus more attention on what's arriving than what's leaving.

GIHUB REPO

https://github.com/intuit/qb-animation-library/