React Spring

This maps all 12 Disney animation principles to React Spring's physics system, which is genuinely useful if you're tired of easing curves that feel robotic. You get squash and stretch with scaleX/scaleY, anticipation with chained api.start calls, follow through with staggered delays, and so on. The examples are concise, each showing the actual spring config (tension, friction) that makes the principle work. What's nice is it teaches you to think in physics terms instead of durations, so buttons feel bouncy and cards feel weighty without tweaking cubic-bezier functions. Best for UI work where you want things to feel alive, not just animated.

skills.sh installs: 562
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill react-spring --agent claude-code

Installs into .claude/skills of the current project.

Files

React Spring Animation Principles

Implement all 12 Disney animation principles using React Spring's spring physics system.

1. Squash and Stretch

const [springs, api] = useSpring(() => ({
  scaleX: 1,
  scaleY: 1,
  config: { tension: 300, friction: 10 }
}));

api.start({ scaleX: 1.2, scaleY: 0.8 });
<animated.div style={springs} />

2. Anticipation

const [props, api] = useSpring(() => ({ y: 0, scaleY: 1 }));

const jump = async () => {
  await api.start({ y: 10, scaleY: 0.9 }); // wind up
  api.start({ y: -200, config: { tension: 200 } }); // action
};

3. Staging

const bgSpring = useSpring({ filter: 'blur(3px)', opacity: 0.6 });
const heroSpring = useSpring({ scale: 1.1, zIndex: 10 });

4. Straight Ahead / Pose to Pose

const [props] = useSpring(() => ({
  from: { x: 0, y: 0 },
  to: [
    { x: 100, y: -50 },
    { x: 200, y: 0 },
    { x: 300, y: -30 }
  ]
}));

5. Follow Through and Overlapping Action

const bodySpring = useSpring({ x: 200 });
const hairSpring = useSpring({ x: 200, delay: 50 });
const capeSpring = useSpring({ x: 200, delay: 100, config: { friction: 15 } });