# How Spring Animations Work: Physics-Based Motion for Interactive UIs

> Discover how spring animations create fluid, physics-based motion for interactive UIs. Learn to implement natural, interruptible animations with velocity for responsive designs.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: deep-dive
- Published: 2026-08-08

---

**Spring animations simulate physical springs to create natural, interruptible motion that carries velocity when interrupted, making them ideal for gesture-driven interfaces and responsive UI elements.**

The emilkowalski/skills repository codifies modern animation standards, defining spring animations as motion that originates from an element’s current on-screen state and preserves momentum during interruptions. Unlike fixed-duration CSS transitions, springs settle dynamically based on physical parameters rather than explicit time values, following the principles documented in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) and [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md).

## What Are Spring Animations?

Spring animations model motion after physical springs, allowing elements to animate from their current presentation value and carry velocity when interrupted. According to the Apple-design skill in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md), "an interface feels alive when motion starts from the current on-screen value, inherits the user’s velocity, … and can be grabbed and reversed at any instant"【/cache/repos/github.com/emilkowalski/skills/main/skills/apple-design/SKILL.md#L10-L13】.

Unlike fixed-duration CSS transitions or keyframe-based animations, springs have no explicit duration. Instead, they settle according to parameters such as **damping** (resistance to oscillation) and **response** (time to reach the target), or alternatively **mass**, **stiffness**, and **damping** in traditional physics models.

## How Spring Animations Work

### Initial State and Target

The animation begins at the element’s *presentation* value—its current transform, opacity, or other animatable property. As defined in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md), the system tracks the distance to the target and applies restoring forces proportional to that distance.

### Force and Damping Mechanics

The spring applies a restoring force controlled by **stiffness** (or **response** in Apple-style configurations) while **damping** reduces oscillation. The repository defines two concrete configurations in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md):

- **Apple-style**: `{ type: "spring", duration: 0.5, bounce: 0.2 }` — designer-friendly with intuitive bounce control
- **Traditional physics**: `{ type: "spring", mass: 1, stiffness: 100, damping: 10 }` — explicit physical parameters【/cache/repos/github.com/emilkowalski/skills/main/skills/review-animations/STANDARDS.md#L65-L71】

### Velocity Carry-Over and Interruptibility

When users interrupt an animation (e.g., grabbing a moving drawer), the spring continues from the *current velocity*, preventing a "brick-wall" jump. This velocity-aware retargeting is why springs are preferred for gesture-driven motion【/cache/repos/github.com/emilkowalski/skills/main/skills/apple-design/SKILL.md#L53-L62】.

## When to Use Spring Animations

### Gesture-Driven Interactions

Use springs for drag or swipe interactions that may be released with momentum. The Apple-design skill explicitly recommends springs for these scenarios because they "keep the released velocity, making the motion feel continuous"【/cache/repos/github.com/emilkowalski/skills/main/skills/apple-design/SKILL.md#L53-L62】.

### Interruptible UI Elements

For toasts, toggles, and drawers that must respond immediately to user input, springs provide inherent support for velocity-aware retargeting. As noted in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), springs handle interruption gracefully, while CSS transitions are acceptable only when motion is simple and non-gesture-driven【/cache/repos/github.com/emilkowalski/skills/main/skills/review-animations/STANDARDS.md#L77-L83】.

### Decorative "Alive" Effects

Apply springs with subtle bounce (`bounce: 0.2`) for pulsating icons or decorative mouse-tracking effects that add natural overshoot without requiring user input【/cache/repos/github.com/emilkowalski/skills/main/skills/review-animations/STANDARDS.md#L63-L73】.

### When to Avoid Springs

For fixed, predetermined motion (such as simple fade-ins), use **CSS transitions** or **keyframes** instead. The Review-animations standards advise that these traditional approaches offer simpler, lower overhead for static, predictable motion【/cache/repos/github.com/emilkowalski/skills/main/skills/review-animations/STANDARDS.md#L77-L85】.

## Implementation Examples

### Motion Library (Apple-Style Springs)

```javascript
import { animate } from 'motion';

// Critically damped spring (no bounce)
animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });

// Momentum-driven with subtle overshoot
animate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });

```

*Reference: [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) lines 90-98【/cache/repos/github.com/emilkowalski/skills/main/skills/apple-design/SKILL.md#L90-L98】*

### CSS Transitions for Simple Cases

```css
/* Interruptible retargeting with CSS */
.toast {
  transition: transform 400ms ease, opacity 400ms ease;
}

/* Entry animation using @starting-style */
.toast {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
  
  @starting-style {
    opacity: 0;
    transform: translateY(100%);
  }
}

```

*Reference: [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) lines 81-96【/cache/repos/github.com/emilkowalski/skills/main/skills/review-animations/STANDARDS.md#L81-L96】*

## Summary

- **Spring animations** model physical springs with parameters like `bounce`, `damping`, and `stiffness` rather than fixed durations.
- Use springs for **gesture-driven interactions**, **interruptible elements** (drawers, toasts), and effects requiring **velocity carry-over**.
- The emilkowalski/skills repository defines two primary configurations: Apple-style (`duration` + `bounce`) and traditional physics (`mass` + `stiffness` + `damping`).
- Prefer **CSS transitions** for static, predetermined motion like simple fade-ins to avoid unnecessary computational overhead.

## Frequently Asked Questions

### How do spring animations differ from CSS transitions?

Spring animations calculate motion frame-by-frame based on physical simulation, allowing them to respond to interruption and inherit velocity from user gestures. CSS transitions follow predetermined curves with fixed durations, making them less suitable for gesture-driven interfaces but appropriate for simple state changes.

### What parameters control spring animation behavior?

According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), you can configure springs using either Apple-style parameters (`duration` and `bounce`) or traditional physics parameters (`mass`, `stiffness`, and `damping`). The `bounce` parameter specifically controls overshoot, where 0 creates critically damped motion and higher values increase oscillation【/cache/repos/github.com/emilkowalski/skills/main/skills/review-animations/STANDARDS.md#L65-L71】.

### When should you avoid spring animations?

Avoid springs for fixed, predetermined motion such as simple fade-ins or static reveals where the starting and ending states are guaranteed and no user interaction occurs during the animation. In these cases, CSS transitions or keyframes provide lower overhead and more predictable timing【/cache/repos/github.com/emilkowalski/skills/main/skills/review-animations/STANDARDS.md#L77-L85】.

### How do you implement interruptible springs in JavaScript?

Use a library like Motion (Framer Motion compatible) with `type: 'spring'` configuration. Ensure the animation reads from the element's current presentation value and preserves velocity when retargeted, as demonstrated in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md)【/cache/repos/github.com/emilkowalski/skills/main/skills/apple-design/SKILL.md#L90-L98】. This approach prevents the "brick-wall" effect where animations abruptly reset when interrupted.