Easing overview

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

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

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 and exit

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.

Entrance

Cubic Bezier
0.0, 0.0, 0.1, 1.0

SCSS
$ease-entrance

Exit

Cubic Bezier
0.35, 0.0, 0.8, 1.0

SCSS
$ease-exit

Application
Scale
Position

Common Durations
250ms
350ms
400ms

Spirited

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 and exit

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. 

Spirited Entrance

Cubic Bezier
0.15, 1.3, 0.3, 1.0

SCSS
$ease-spirited-entrance

Spirited Exit

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.

Read more

  • Was this Helpful?
  •