Easing & Motion Studio

Shape animation timing visually — drag a cubic-bezier curve or tune a real spring, watch it loop on position, scale, rotation and opacity, then export CSS, Tailwind or Framer. Springs bake down to a modern CSS linear() curve.

Curve

Drag the two handles to shape the timing function. Pull a handle past the top or bottom for overshoot.

Duration600ms

Live preview

The same curve applied to position, scale, rotation and opacity — looping so you can feel the motion.

Translate

Scale

Rotate

Fade

600ms loop

Export

Drop the timing function straight into your transition.

:root {
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --duration: 600ms;
}

.element {
  transition: transform var(--duration) var(--ease);
}