Easing

Animation curves, frame by frame.

What it does

Shows an easing curve and the animation it gives, side by side, to choose the right ease for a motion, a transition or a UI.

Pick a curve (Sine, Quad, Cubic… Back overshoots, Elastic springs, Bounce bounces) and a direction: In starts slowly, Out ends slowly, In-Out does both.
Custom: drag the two handles in the graph. Dragging a handle of any curve makes it custom.
Spring: a physical spring, as in Figma, Framer, SwiftUI or Rive. Set its stiffness, damping and mass (or pick a preset). Its duration isn’t chosen: it’s the time the spring takes to settle (within 0.1 %). To copy: the values for Framer and Figma, SwiftUI, and a CSS linear() easing with its duration.
Snap to grid: the handles lock onto a 0.05 grid, for clean values. On a computer, hold Shift to do the opposite while dragging.
The faint square moves in linear, to compare. The small marks on its track are the frames: they get closer where the motion slows down.
Timeline: drag it, or step frame by frame with ‹ › (← → on a computer, Shift for 10 frames; Space plays or pauses). The line below says where you are: frame, time and progress. Pick the duration (1, 2, 5 s or the slider) and the frame rate.
To copy: cubic-bezier for CSS, Figma, Rive, Framer or Lottie; the name for animation libraries; After Effects: in the Keyframe Velocity window, the influence and speed of the first key (outgoing) and of the second (incoming). The speed is a multiple of the average speed (total change ÷ duration).

Free, no account, nothing is sent: it runs in your browser, even offline.