Spring Animation Configuration for Natural Motion: A Complete Guide to the Skills Repository

The emilkowalski/skills repository stores authoritative spring animation configurations in skills/review-animations/STANDARDS.md, specifying an Apple-style preset of { type: "spring", duration: 0.5, bounce: 0.2 } for natural motion and traditional physics parameters for complex gestures.

The emilkowalski/skills repository is a curated collection of markdown-based design engineering guidelines that encode best practices for UI animation. Understanding the correct spring animation configuration for natural motion is essential for creating interfaces that feel physically responsive and native to touch-based interactions. This article extracts the precise parameters and implementation patterns from the repository's animation standards.

Core Spring Animation Concepts in STANDARDS.md

The repository defines spring behaviors in skills/review-animations/STANDARDS.md across lines 65-81, categorizing them into two primary configuration types.

Apple-Style Spring Preset

Lines 65-68 recommend a simplified preset that mirrors iOS animation physics. The configuration uses { type: "spring", duration: 0.5, bounce: 0.2 } to produce smooth, slightly bouncy motion that feels native on Apple platforms.

Traditional Physics Spring

For fine-grained control over oscillation and momentum, lines 69-71 define traditional physics parameters: { type: "spring", mass: 1, stiffness: 100, damping: 10 }. This configuration suits drag-with-momentum gestures and decorative elements requiring custom "alive" behaviors.

Bounce Range Guidelines

The standards explicitly constrain bounce values between 0.1 and 0.3 (lines 73-74) to prevent distracting jitter. Higher bounce values are reserved specifically for gesture-driven interactions like drag-to-dismiss.

Interruptibility and Velocity Preservation

According to lines 78-81, springs preserve velocity when interrupted, unlike keyframe animations that reset to initial states. This makes spring animation configurations essential for reversible gestures such as swipe-to-close or pull-to-refresh.

Repository Structure and Knowledge Organization

The emilkowalski/skills repository organizes animation guidelines as a declarative knowledge graph. Rather than executable code, configurations reside as JSON-compatible objects within markdown files.

The skills/review-animations/SKILL.md file cross-references STANDARDS.md whenever reviewers need precise spring values. As noted in the "Required Output Format" section, reviewers must "pull the exact one from STANDARDS.md rather than approximating," ensuring consistency across the codebase.

Additional skills leverage these definitions:

• skills/improve-animations/SKILL.md suggests spring-based fixes during audits
• skills/find-animation-opportunities/SKILL.md identifies where natural-motion springs add value

Implementation Examples

Apple-Style Spring with Framer Motion

import { motion } from "framer-motion";

/* Apple-style spring from STANDARDS.md */
const spring = { type: "spring", duration: 0.5, bounce: 0.2 };

export const Popup = () => (
  <motion.div
    initial={{ scale: 0.95, opacity: 0 }}
    animate={{ scale: 1, opacity: 1 }}
    transition={spring}
  >
    {/* Content */}
  </motion.div>
);

Physics Spring for Drag-to-Dismiss

import { motion, useMotionValue, useTransform } from "framer-motion";

const physicsSpring = {
  type: "spring",
  mass: 1,
  stiffness: 100,
  damping: 10,
};

export const DraggableCard = () => {
  const x = useMotionValue(0);
  const opacity = useTransform(x, [-300, 0, 300], [0, 1, 0]);

  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: -Infinity, right: Infinity }}
      style={{ x, opacity }}
      transition={physicsSpring}
    >
      {/* Card content */}
    </motion.div>
  );
};

Web Animations API Implementation

const element = document.querySelector(".toast");

/* Apple-style spring translated to WAAPI easing */
const keyframes = [
  { transform: "scale(0.95)", opacity: 0 },
  { transform: "scale(1)", opacity: 1 }
];

const options = {
  duration: 500,
  easing: "cubic-bezier(0.23,1,0.32,1)",
  fill: "forwards",
};

element.animate(keyframes, options);

Summary

• The authoritative spring animation configuration for natural motion resides in skills/review-animations/STANDARDS.md lines 65-71.
• Apple-style springs (duration: 0.5, bounce: 0.2) provide native-feeling motion for standard UI transitions.
• Physics-based springs (mass, stiffness, damping) offer granular control for gesture-driven interactions.
• Keep bounce values between 0.1 and 0.3 to avoid visual distraction unless implementing specific dismissal gestures.
• Springs preserve interruptibility and velocity, making them superior to keyframes for reversible user interactions.
• The repository's declarative markdown structure ensures consistent application across skills/review-animations/SKILL.md and related audit tools.

Frequently Asked Questions

What is the recommended spring animation configuration for natural motion in the Skills repository?

The repository recommends an Apple-style preset defined in STANDARDS.md lines 65-68: { type: "spring", duration: 0.5, bounce: 0.2 }. This configuration produces smooth, slightly bouncy motion that feels native to iOS-style interfaces without overwhelming the user.

Where are the spring physics parameters documented in the emilkowalski/skills codebase?

All spring definitions live in skills/review-animations/STANDARDS.md between lines 65 and 81. The skills/review-animations/SKILL.md file references these values directly, requiring reviewers to pull exact configurations rather than approximating values.

When should I use traditional physics springs instead of the Apple-style preset?

Use traditional physics parameters (mass: 1, stiffness: 100, damping: 10) when implementing drag-with-momentum gestures or decorative elements requiring custom oscillation curves. According to lines 69-71 of STANDARDS.md, these provide finer control over how the animation decelerates compared to the simplified duration/bounce model.

Why do spring animations preserve velocity better than keyframes for gesture-based interactions?

As documented in STANDARDS.md lines 78-81, spring physics calculations maintain momentum when interrupted mid-animation, whereas keyframe animations reset to their initial state. This makes springs the preferred choice for reversible gestures like swipe-to-close or pull-to-dismiss, where users may reverse direction during the motion.

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