# Framer Motion Spring Animation Configurations for Bounce, Stiffness, and Damping

> Master Framer Motion spring animations! Explore bounce, stiffness, and damping configurations for fluid Apple-style UI or precise physics control. Optimize your React animations.

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

---

**Use `{ type: "spring", duration: 0.5, bounce: 0.2 }` for Apple-style UI animations or `{ mass: 1, stiffness: 100, damping: 10 }` for full physics control.**

The **Skills** repository by Emil Kowalski documents two canonical approaches to Framer Motion spring animation configurations. These patterns appear across animation standards and design engineering guidelines, governing how UI elements move with realistic physics.

## Apple-Style Spring Preset: Duration and Bounce

The designer-friendly API hides physics complexity behind intuitive parameters. In [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) (lines 66-68), the Apple-style preset is defined as:

```tsx
{ type: "spring", duration: 0.5, bounce: 0.2 }

```

This configuration appears in both [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) (lines 182-191) and [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (lines 71-78), establishing it as the default for polished product interfaces.

### Bounce Parameter Explained

The **bounce** parameter accepts values from 0 to 1, representing the fraction of velocity retained after the first overshoot:

- `0` — critically damped motion with zero overshoot
- `0.1`–`0.3` — subtle, professional "pop" suitable for most UI elements
- `>0.3` — playful, exaggerated bounce reserved for gesture-driven interactions

```tsx
import { motion } from "framer-motion";

<motion.div
  animate={{ y: 0 }}
  initial={{ y: 100 }}
  transition={{ type: "spring", duration: 0.5, bounce: 0.2 }}
/>

```

## Traditional Physics Preset: Stiffness and Damping

For precise control, the repository documents the full physics triad in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) (lines 70-71):

```tsx
{
  type: "spring",
  mass: 1,
  stiffness: 100,
  damping: 10
}

```

### Stiffness Controls Response Speed

Higher **stiffness** values make the spring pull harder toward the target, producing snappier transitions. The default of `100` balances responsiveness with natural feel.

### Damping Controls Oscillation Decay

**Damping** determines how quickly oscillations settle:

- Lower values (≈1) — near-critical damping, minimal bounce
- Moderate values (≈10) — lightly under-damped, subtle overshoot
- Higher values (>20) — heavy resistance, sluggish motion

```tsx
import { motion } from "framer-motion";

<motion.div
  animate={{ scale: 1 }}
  initial={{ scale: 0.9 }}
  transition={{
    type: "spring",
    mass: 1,
    stiffness: 100,
    damping: 10,
  }}
/>

```

## Alternative: useSpring Hook API

The same Framer Motion spring animation configurations work with the imperative hook:

```tsx
import { useSpring, motion } from "framer-motion";

const y = useSpring(0, { stiffness: 100, damping: 10 });
return <motion.div style={{ y }} />;

```

## Gesture-Driven Spring Configurations

For drag-to-dismiss patterns, the repository recommends tailoring bounce to existing momentum:

```tsx
<motion.div
  drag="y"
  dragConstraints={{ top: 0, bottom: 0 }}
  dragElastic={0.2}
  transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
/>

```

## Summary

- **Apple-style preset:** `{ type: "spring", duration: 0.5, bounce: 0.2 }` — documented in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) for UI-centric work
- **Physics preset:** `{ mass: 1, stiffness: 100, damping: 10 }` — full control over spring behavior
- **Bounce range:** 0.1–0.3 for professional interfaces, higher for playful interactions
- **Stiffness guideline:** 100 provides balanced snappiness
- **Damping guideline:** 10 offers subtle, pleasing overshoot

## Frequently Asked Questions

### What bounce value should I use for standard UI animations?

Keep bounce between **0.1 and 0.3** for most interface elements. According to the Skills repository guidelines in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), this range produces a subtle "pop" that feels responsive without appearing unprofessional.

### How do stiffness and damping relate to bounce?

**Stiffness** and **damping** are the underlying physics parameters that Framer Motion converts to `bounce` and `duration` in the simplified API. Higher stiffness shortens settlement time; lower damping increases oscillation. The traditional preset in the source uses 100 stiffness and 10 damping as a balanced starting point.

### When should I use the full physics API instead of bounce and duration?

Use **mass, stiffness, and damping** when you need to synchronize multiple springs, match specific physical systems, or animate continuous values via `useSpring`. The Apple-style API with `bounce` and `duration` is preferred for discrete animations where designer intuition matters more than mathematical precision.

### Where are these configurations documented in the Skills repository?

The canonical definitions live in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) at lines 66-71, with practical applications shown in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) (lines 182-191) and [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (lines 71-78).