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.

كيف يعمل

أدخل

Enter your data into the tool above. Everything stays local to your browser.

معالجة

The tool processes your data instantly in your browser using JavaScript. No server, no waiting.

تنزيل

Get your result instantly. Nothing is stored after you leave the page — complete privacy.

لماذا تستخدم أداتنا؟

✓مجاني تمامًا — بدون تكاليف خفية، أبدًا

✓لا حساب أو بريد إلكتروني أو تسجيل دخول مطلوب

✓الملفات لا تغادر جهازك أبدًا

✓لا قيود على حجم الملف مطلقًا

✓لا علامات مائية على أي مخرجات

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 مولد التخفيف المكعب بيزييه