# Recommended Bounce Value for UI Spring Animations: A Complete Guide

> Discover the recommended bounce value for UI spring animations in emilkowalski/skills. Learn the optimal 0.2 value and acceptable ranges to enhance your user interfaces.

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

---

**The recommended bounce value for UI spring animations in the emilkowalski/skills repository is 0.2, with an acceptable range of 0.1–0.3.**

This value follows Apple-style motion guidelines and should only be used for momentum-driven interactions like drag-to-dismiss gestures. Most UI elements should use `bounce: 0` for critically damped springs to avoid unnecessary overshoot.

## Default Spring Configuration

According to the animation standards documented in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), the canonical spring configuration uses:

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

```

This configuration appears consistently across multiple skill files in the repository, establishing `0.2` as the **sweet spot** for subtle, professional-feeling bounce.

## When to Use Bounce vs. Critically Damped Springs

### Use Bounce (0.1–0.3) For

- **Drag-to-dismiss gestures** where momentum already exists
- **Flick-based interactions** that naturally carry velocity
- **Elastic feedback** for user-initiated, high-energy actions

### Avoid Bounce (Use `bounce: 0`) For

- Static UI elements like menus and dialogs
- Simple fade transitions
- Any element without preceding user momentum

The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) file explicitly states: "bounce subtle (0.1–0.3); avoid bounce in most UI" at lines 67–73.

## Implementation Examples

### Standard Spring Animation with Recommended Bounce

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

export const Card = () => (
  <motion.div
    initial={{ y: 50, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    transition={{
      type: "spring",
      duration: 0.5,
      bounce: 0.2  // ✅ recommended bounce value
    }}
  >
    {/* card content */}
  </motion.div>
);

```

### Momentum-Driven Interaction (Drag-to-Dismiss)

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

function dismiss(el: HTMLElement, targetY: number) {
  animate(el, { y: targetY }, {
    type: "spring",
    duration: 0.4,
    bounce: 0.2   // subtle bounce justified by preceding flick
  });
}

```

For static UI elements, always prefer critically damped motion:

```tsx
<motion.div
  animate={{ opacity: 1 }}
  transition={{
    type: "spring",
    bounce: 0  // no overshoot for clean, professional feel
  }}
/>

```

## Source Files and Documentation

The bounce value recommendations in emilkowalski/skills span four key files:

- **`skills/review-animations/STANDARDS.md#L67`** — Defines the default spring config and `0.1–0.3` bounce range
- **`skills/improve-animations/AUDIT.md#L66`** — Restates Apple-style bounce recommendations for animation audits
- **`skills/animate/SKILL.md#L129`** — Provides generic spring snippets with bounce guidance
- **`skills/apple-design/SKILL.md#L78`** — Maps Apple's damping ratio to Framer Motion's `bounce` parameter

## Summary

- **Default recommended bounce**: `0.2`
- **Acceptable range**: `0.1` to `0.3`
- **Usage rule**: Reserve bounce for momentum-driven gestures; use `bounce: 0` for standard UI
- **Source authority**: `emilkowalski/skills` animation standards documentation

## Frequently Asked Questions

### What happens if I use a bounce value higher than 0.3?

Exceeding 0.3 creates excessive overshoot that feels unprofessional and can cause usability issues. The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) explicitly caps the acceptable range at 0.3 to maintain Apple-style motion quality.

### Is the 0.2 bounce value specific to Framer Motion?

Yes. The [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) file maps Apple's native damping ratio concept to Framer Motion's `bounce` parameter. While the underlying physics differ, `bounce: 0.2` approximates the subtle elasticity found in Apple's system animations.

### Can I use bounce for modal enter/exit animations?

Generally no. According to [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md), modals and dialogs should use `bounce: 0` for critically damped springs. Only add bounce if the modal appears as a direct result of a momentum gesture, such as a swipe-to-reveal action.

### Why does the repository recommend different values for different interaction types?

The guidance reflects **energy conservation** in motion design. Gestures with existing momentum naturally expect elastic settling, while static elements appearing without velocity should settle cleanly without overshoot. This distinction prevents visual fatigue and maintains interface clarity.