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.
How It Works
Why use ours?
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