Between two keyframes the value interpolates. The shape of that interpolation is the easing curve. Mockup animations look natural when you pick the right curve.
Built-in curves
| Curve | Behaviour |
|---|---|
| Linear | Constant velocity. Default. |
| Ease | Soft start, soft end (CSS default). |
| Ease in (quad / cubic / quart / quint / sine) | Slow start, fast end. |
| Ease out (quad / cubic / quart / quint / sine) | Fast start, slow end. |
| Ease in-out (quad / cubic / quart / quint / sine) | Slow at both ends. |
| Spring | Natural physics; configurable stiffness, damping, mass. |
| Bounce | Settles with a bounce. |
| Custom Bezier | Drag the curve handles to shape your own. |
That gives 18+ presets plus a fully custom option.
Pick a curve
In the keyframe panel, click the segment between two keyframes. A small popover offers the curve list, with a live preview animation for each option.
When to use which
- Linear — mechanical motion, conveyor belts, clock hands.
- Ease in — something accelerating in (camera diving toward the device).
- Ease out — something settling (device sliding to its final position).
- Ease in-out — most “natural” motion; the safe default.
- Spring — wobbles, soft impacts, playful UI motion.
- Bounce — exaggerated impact (rare in mockups, common in motion typography).
- Custom Bezier — when you need the curve to overshoot, plateau, or follow a specific brand-motion language.
Variations within a family
Each of the easing families (quad, cubic, quart, quint, sine) is a different curvature. Quad is gentlest, quint is the most extreme. Sine is a soft S-curve. Try them with the preview animation in the popover.
Spring physics
Selecting Spring exposes three controls:
- Stiffness — higher = snappier.
- Damping — higher = settles faster, less wobble.
- Mass — higher = slower acceleration.
Defaults give a natural product-launch wobble.
Leave a Reply