CreovantaCreovanta

Easing Curve Editor

Design custom animation timing visually. Drag the control points to shape the curve, pick a preset, then copy the values into your project.

P1(0.25, 0.10)P2(0.25, 1.00)

Preview

Presets

Values

Export

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

AE Expression

// Cubic-bezier easing — paste on any property with 2 keyframes...

AE Script (.jsx)

// Creovanta Easing — Select a property with 2 keyframes, then run...

GSAP

gsap.to(el, { ease: CustomEase.create("custom", { values: [0.25, 0.10, 0.25, 1.00] }) })

Framer Motion

transition={{ ease: [0.25, 0.10, 0.25, 1.00] }}

Compare with Presets

Your Curve
Linear
Ease Out
Ease In Out

How to Use These Easing Curves

After Effects — Expression

  1. Set 2 keyframes on any property (Position, Opacity, Scale, etc.)
  2. Set them to linear interpolation (Ctrl+click the keyframe diamonds)
  3. Alt+click the stopwatch icon to open the expression editor
  4. Paste the copied expression and click outside to apply

After Effects — Script (.jsx)

  1. Set 2 keyframes on any property
  2. Select both keyframes in the timeline
  3. Click Download .jsx above to save the script
  4. In AE: File > Scripts > Run Script File and pick the downloaded file
  5. The easing is applied directly to the graph editor — no expressions needed

CSS / Web

  1. Copy the CSS export value
  2. Use it in your stylesheet: transition-timing-function: cubic-bezier(...);
  3. Or in animations: animation-timing-function: cubic-bezier(...);

GSAP / Framer Motion

  1. Copy the GSAP or Framer Motion export
  2. Paste directly into your animation code
  3. GSAP requires the CustomEase plugin (included with GSAP Club)

What is a cubic-bezier curve?

A cubic-bezier curve defines how an animation progresses over time. Instead of moving at a constant speed (linear), it can start slow and speed up (ease-in), start fast and slow down (ease-out), or combine both (ease-in-out). The four values (X1, Y1, X2, Y2) control two handle points that shape the curve. X values represent time (0 to 1) and Y values represent progress (0 to 1, or beyond for overshoot effects).