principlejavascriptTip

Spring vs Tween Transitions in Framer Motion

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

spring animationtween animationstiffness dampingeasingframer motion transitionanimation physics

Problem

Animations feel either too mechanical (linear easing) or too bouncy (default spring), and it is unclear when to use each transition type.

Solution

Use type: 'tween' with an easing curve for UI chrome (tooltips, modals, page fades) where precise timing matters. Use type: 'spring' for interactive elements (drag releases, element entrances) where physical feel matters.

// Tween — predictable, fixed duration
transition={{ type: 'tween', duration: 0.25, ease: 'easeInOut' }}

// Spring — physics-based, duration is emergent
transition={{ type: 'spring', stiffness: 300, damping: 30 }}

// Quick snappy spring
transition={{ type: 'spring', stiffness: 500, damping: 40 }}

// Gentle bouncy spring
transition={{ type: 'spring', stiffness: 100, damping: 10 }}

Why

Springs do not have a fixed duration — they settle based on stiffness and damping. This makes them feel natural for physics interactions but unpredictable for coordinated multi-element choreography where timing must align.

Gotchas

Spring animations ignore the duration prop — use stiffness and damping instead.
Very low damping (< 10) causes oscillation that users may find distracting.
For layout animations, springs are often the better default because they absorb layout measurement jitter.
Framer Motion's default transition is a spring — override explicitly for tweens.

Revisions (0)

No revisions yet.