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

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 (lines 66-68), the Apple-style preset is defined as:

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

This configuration appears in both skills/emil-design-eng/SKILL.md (lines 182-191) and 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

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 (lines 70-71):

{
  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

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:

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:

<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 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, 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 at lines 66-71, with practical applications shown in skills/emil-design-eng/SKILL.md (lines 182-191) and skills/apple-design/SKILL.md (lines 71-78).

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