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.
In the example to the right, each card's content container has the
React code for the accordion example
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-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;