LibraTool logoLibraTool
📈
⚙️

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

Motion preview
Width transition
CSS value
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

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.

Πώς λειτουργεί

1
Εισαγωγή
Enter your data into the tool above. Everything stays local to your browser.
2
Επεξεργασία
The tool processes your data instantly in your browser using JavaScript. No server, no waiting.
3
Λήψη
Get your result instantly. Nothing is stored after you leave the page — complete privacy.

Γιατί να χρησιμοποιήσετε το δικό μας;

✓Εντελώς δωρεάν — χωρίς κρυφό κόστος, ποτέ
✓Δεν απαιτείται λογαριασμός, email ή σύνδεση
✓Τα αρχεία δεν εγκαταλείπουν ποτέ τη συσκευή σας
✓Χωρίς κανένα όριο μεγέθους αρχείου
✓Χωρίς υδατόσημα σε κανένα αποτέλεσμα

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

Συχνές ερωτήσεις

Back to CSS Cubic-Bezier Easing Generator