Reference
Easing reference
The 5 bezier curves, with their real control points. They're the standard CSS curves, which matters at export: Motion and CSS use them directly, while GSAP's power curves are a different family, so GSAP gets them sampled.
| Preset | Control points | CSS equivalent |
|---|---|---|
| linear | 0, 0, 1, 1 | linear |
| ease | 0.25, 0.1, 0.25, 1 | cubic-bezier(0.25, 0.1, 0.25, 1) |
| easeIn | 0.42, 0, 1, 1 | cubic-bezier(0.42, 0, 1, 1) |
| easeOut | 0, 0, 0.58, 1 | cubic-bezier(0, 0, 0.58, 1) |
| easeInOut | 0.42, 0, 0.58, 1 | cubic-bezier(0.42, 0, 0.58, 1) |
Use a bezier when timing matters: it has a duration you choose and arrives exactly on time, which suits anything synced to something else. Use a spring when feel matters: it has no duration and arrives when its physics says so.