Skip to content
Ease

Presets, read frame by frame

Each curve is drawn as an animator's spacing chart: one tick per frame at 60fps. Ticks bunch where the motion slows and spread where it travels fast.

Springs

Exported as linear()

  • 01Snappy

    588 ms

    A critically damped spring. Fast, decisive, no wobble.

  • 02Gentle

    1762 ms

    A slow, overdamped spring that eases in without any edge.

  • 03Bouncy

    825 ms

    A lively spring with a visible overshoot and settle.

  • 04Wobbly

    1669 ms

    High bounce. Several oscillations before rest.

  • 05Press

    319 ms

    A short, tight spring for button and tap feedback.

  • 06Sheet

    830 ms

    A heavier, slower spring for large surfaces like sheets and modals.

Bezier curves

Exported as cubic-bezier()

  • Arrives fast and lands softly. Excellent for entering elements.

  • Leaves slowly then speeds away. For exiting elements.

  • 09Standard

    300 ms

    A balanced ease-in-out for elements moving on screen.

  • 10Expo out

    700 ms

    A dramatic, exponential deceleration.

  • 11Back out

    400 ms

    A bezier that overshoots once, with no physics needed.

  • 12Anticipate

    500 ms

    Pulls back before moving forward.

  • 13Linear

    300 ms

    Constant speed. Mechanical by design.

  • 14CSS ease

    300 ms

    The browser default, for reference.