Recommended Bounce Value for UI Spring Animations: A Complete Guide

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, the canonical spring configuration uses:

{
  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 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

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)

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:

<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 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 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}