Motion Easing Tool — Bugaboo × Joolz

Flow — Horizontal

Symmetric ease-in-out · water moving across a surface · P1 is always mirror of P2

ease-out

—

ease-in

—

P2x 0.65

P2y 0.95

P1x 0.55

P1y 0.05

Settle — Vertical

Ease-out · water finding its level · no bounce · ease-in and ease-in-out are derived

ease-in

—

ease-in-out

—

P1x 0.23

P1y 0.26

P2x 0.20

P2y 0.98

Duration Scale

Direct durations for Small (element-level) and Large (view-level).

Flow — Small

250

Flow — Large

600

Settle — Small

175

Settle — Large

500

Scale	Flow	Settle
Small Element-level · buttons · toggles	— --b-flow-dur-sm	— --b-settle-dur-sm
Large View-level · menus · page loads	— --b-flow-dur-lg	— --b-settle-dur-lg

CSS Tokens

loading…

Roll — Horizontal

Symmetric ease-in-out · smooth rolling motion · same mirror relationship as Flow

ease-out

—

ease-in

—

P2x 0.36

P2y 0.98

P1x 0.37

P1y 0.00

Suspension — Vertical

Spring overshoot on arrival · stroller shock absorber · CSS approximation shown for export

GSAP ease

back.out(1.4)

CSS approx.

—

Peak overshoot

—

Overshoot 1.7

Duration Scale

Direct durations for Small (element-level) and Large (view-level).

Roll — Small

275ms

Roll — Large

750ms

Suspension — Small

300ms

Suspension — Large

825ms

Scale	Roll	Suspension
Small Element-level · buttons · toggles	— --j-roll-dur-sm	— --j-sus-dur-sm
Large View-level · menus · page loads	— --j-roll-dur-lg	— --j-sus-dur-lg

CSS Tokens

loading…