---

name: to-spring-or-not-to-spring description: Decision framework for choosing between easing curves and springs in interface motion. Use when implementing animations, reviewing motion feel, or debugging why an animation feels wrong. Triggers on tasks involving CSS transitions, animation libraries, or motion design decisions. license: MIT metadata: author: raphael-salaja version: "1.0.0" source: /content/to-spring-or-not-to-spring/index.mdx

To Spring or Not To Spring

A decision framework for choosing between easing curves and springs. They are not interchangeable tools—they come from different ways of thinking about motion and play different roles in an interface.

When to Apply

Reference these guidelines when:

• Choosing animation timing functions
• Debugging motion that feels "off"
• Implementing gesture-driven interactions
• Reviewing animation implementations
• Deciding if motion is needed at all

Decision Framework

Ask: Is this motion reacting to the user, or is the system speaking?

Springs

Best for motion directly tied to user input. They remain responsive when interrupted and reflect input energy.

Copytransition={{
  type: "spring",
  stiffness: 900,
  damping: 80,
  mass: 10,
}}

Parameters

When to Use

• Dragging and releasing
• Gesture-driven interactions
• Anything that can be interrupted
• When velocity matters

Watch Out

Springs can feel restless when the system is simply announcing a state change.

Easing Curves

Describe how motion progresses over a fixed duration.

Copytransition-timing-function: cubic-bezier(x1, y1, x2, y2);

Control Points

Curve Types

Duration Guidelines

If animation feels slow, shorten duration before adjusting the curve.

The Key Difference

Easing curves have a predefined start and end in time. Springs do not.

This explains why springs survive interruption while easing curves fall apart when the user changes their mind.

When to Use No Animation

Not everything needs motion. High-frequency interactions often feel slower and noisier with animation:

• Typing
• Keyboard navigation
• Fast toggles
• Context menu entrances (Apple animates exit only)

Choosing no motion is still a design decision—prioritizing immediacy over expressiveness.

Key Guidelines

• Start with the interaction, not the animation technique
• Match the role: User-reactive vs system-announcement
• Test interruption: Does it hold up when the user changes their mind?
• Default to less: Animate with intent, not by default

References

• Apple WWDC23: Animate with Springs
• The Beauty of Bézier Curves - Freya Holmér
• Motion library
• MDN cubic-bezier() documentation
• Material Design Motion Guidelines
• Apple Human Interface Guidelines: Motion
• NNGroup: Animation for Attention and Comprehension