Easing styles go by various names across platforms, QuickBooks Design System has a custom defined set of easing. These styles typically apply to interactive micro-motions, where storytelling animations might require more expressive custom easing.
Slow easing creates a subtle movement that works well for passive animations, when the user is viewing but not interacting with the interface. This includes visual feedback or cases where the UI is hinting at the next action. Slow is our default ease applied to opacity and color animations.
Cubic Bezier
0.35, 0.0, 0.5, 1.0
Application
Opacity
Color
Scale
Position
SCSS
$ease-slow
Common Durations
300ms
400ms
500ms
Quick easing creates a responsive animation that instantly moves based off the user’s interaction. This curve is used with objects that have a dynamic position, scale, or rotation and appear and stay within the screen.
Cubic Bezier
0.35, 0.0, 0.25, 1.0
Application
Scale
Position
Rotation
SCSS
$ease-quick
Common Durations
300ms
400ms
500ms
Entrance easing is used to bring an element into view. Exit easing is how it leaves view. This type of movement combined with an opacity animation creates smooth transitions between scenes generally applied to position or scale.
Cubic Bezier
0.0, 0.0, 0.1, 1.0
SCSS
$ease-entrance
Cubic Bezier
0.35, 0.0, 0.8, 1.0
SCSS
$ease-exit
Application
Scale
Position
Common Durations
250ms
350ms
400ms
Spirited ease is similar to quick easing, except with a subtle spring overshoot. It’s used when animating objects that have dynamic position, scale, or rotation appear and stay within the confines of the screen.
Cubic Bezier
0.35, 1.3, 0.3, 1.0
Application
Scale
Position
Rotation
SCSS
$ease-spirited
Common Durations
750ms
1000ms
Spirited entrance animates an element into view with momentum and subtly pulls back into place. Spirited exit creates anticipation by building momentum then accelerates out of the scene. Think: stretching a rubber band then releasing.
Cubic Bezier
0.15, 1.3, 0.3, 1.0
SCSS
$ease-spirited-entrance
Cubic Bezier
0.7, -0.1, 0.6, 0.1
SCSS
$ease-spirited-exit
Application
Scale
Position
Common Durations
750ms
1000ms
Continue reading
Motion resources
Downloads, links, guides, and tools to help you learn, design, and implement motion for the QuickBooks ecosystem.
