Easing and springs

Every keyframe has a curve that shapes the segment leading into it. EaseKit has two families: tweens (cubic Bézier curves with a fixed duration) and springs (physical motion described by a duration and a bounce). This page lists every preset with its values, so you can match them in code.

Named curves#

Springs#

A spring is described by a perceptual duration in seconds and a bounce: 0 is critically damped (no overshoot), up to about 0.5 is playful. Springs land exactly on the keyframe; their curve is stretched when you stretch a clip. The AI's range: bounce up to 0.3 for UI, up to 0.5 for teasers and social clips.

The curve editor#

Switching from Tween to Spring starts at 0.45 s with bounce 0.1. Physics values convert to duration and bounce, so both views describe the same spring. Under the controls, a line reads for example “Overshoot 12% · settles after 0.62 s”.

State transitions#

The default transition into a state is a spring of 0.3 s with bounce 0.1 (lasting 0.25 s). The menu also has Spring · calm, Spring · snappy, Spring · playful, Ease out · 150 ms, Ease out · 250 ms, Ease in-out · 300 ms and Instant. A trigger can carry its own transition, which wins over the state's (set by the AI or over MCP). A released drag springs back with 0.35 s and bounce 0.25 unless its trigger has a transition.

Variant transitions#

Variant switches use the first transition that's set: the switch's or trigger's own, the instance's Transition, the variant set's Transition: …, then the default Short spring (0.3 s, bounce 0.1).

Colors in a variant switch blend with a critically damped version of a spring, so a color never overshoots.

Style presets#

In exports#

// The default curve in CSS and Motion
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
<motion.div transition={{ ease: [0.23, 1, 0.32, 1] }} />

Related articles#

• Keyframes and easing curves
• Animatable properties