Easing Values for JS Animation Libraries
Get cubic-bezier values for GSAP, Framer Motion, anime.js, and more.
Drag the teal & rose handles to shape the curve
Presets
💡 The rose and teal handles can pull above or below the box (Y beyond 0-1) to create “overshoot” / bounce effects like back-out and anticipate. X stays within 0-1 (time can’t reverse).
JS Animation tips
Framer Motion accepts an array [x1, y1, x2, y2] — read the four numbers from the cubic-bezier() output.
GSAP's CustomEase and anime.js both take cubic-bezier strings or the four control values.
Designing the curve visually beats guessing magic numbers — drag until the motion feels right, then copy.
Necə İşləyir
Niyə bizimkini istifadə etməlisiniz?
Also check out…
Custom CSS Transition Easing
Design natural-feeling easing for hover effects, m
Bounce & Overshoot Animations
Create playful spring/bounce motion by pulling con
Easing for @keyframes Animations
Pick the right animation-timing-function for CSS k
Understand How Easing Works
See the relationship between a bezier curve and th