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.
These animations will play as soon as the class is added.
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.
View semantic mappings in: /scss/_semantic-classes.scss
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.
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;
