shpapps

Lab · Tool

Easing Studio

Shape a cubic-bezier curve or tune a spring, watch it move on real interface patterns, then copy the code for your platform.

  • Curves and springs
  • 9 code targets
  • Shareable links
  • Runs in your browser

Editor

Drag the handles, or focus one and use the arrow keys (Shift for bigger steps).Position over time, from rest at 0 to the target at 1. Click the graph or press Space to replay.

CSS value
cubic-bezier(0.2, 0, 0, 1)
Control points
Damping c
–
Settles in
–
Overshoot
–
Regime
–

c = 2ζ√(k·m). Settles when it stays within 0.1% of the target.

Presets

Preview

Your easing
Linear

Code

Field notes

How to choose an easing

  1. Decelerate what enters

    Things arriving on screen should start fast and settle gently (ease-out, Decelerate). The response feels immediate, and the eye can follow where the element lands.

  2. Accelerate what leaves

    Exits can start slowly and speed up (ease-in): nobody needs to watch an element settle on its way out. Keep them a little shorter than entrances. Reverse curve turns an ease-out into its matching ease-in.

  3. Use springs under the finger

    When motion continues a gesture (a drag, a fling, a sheet pulled down), a physics spring can start from the gesture's velocity and be redirected mid-flight without a jump. The CSS linear() export is a fixed-time curve, so it cannot do that.

  4. Keep it short

    Most interface transitions feel right between about 150 and 400 ms. Small things like toggles and buttons sit at the short end; large surfaces like sheets and full-screen changes at the long end. Motion that repeats all day should be the quickest.

  5. Respect reduced motion

    When someone asks their system for less motion, swap large movement for a quick fade or an instant change. Check prefers-reduced-motion on the web, accessibilityReduceMotion in SwiftUI and disableAnimations in Flutter's MediaQuery.