Motion lab↗

Shape a cubic Bézier curve, preview its movement, and copy production-ready CSS or GSAP code.

Shape the in-betweenProgress ↑ / Time →

Drag the colored handles, or use the sliders for precise values.

→

Your curve, in motion.

transition: transform 1.4s cubic-bezier(0.25, 0.10, 0.25, 1.00);

import { CustomEase } from 'gsap/CustomEase'

gsap.registerPlugin(CustomEase)
gsap.to(element, {
  x: 300,
  duration: 1.4,
  ease: CustomEase.create('', '0.25, 0.10, 0.25, 1.00')
})

A look under the surface

Useful by design.
Curious by nature.

The horizontal axis is elapsed time; the vertical axis is movement progress. Control points shape acceleration. Y values outside 0–1 create overshoot. The GSAP preview and exported CSS use the same curve.

B(t) = (1−t)³P₀ + 3(1−t)²tP₁
     + 3(1−t)t²P₂ + t³P₃