Popmotion

If you need to implement Disney's animation principles in code, this gives you working examples for all 12 using Popmotion's functional API. You get squash and stretch with scale transforms, anticipation through sequenced animations, follow-through with delayed timing, and physics-based spring animations for exaggeration. The examples are practical and copy-paste ready, covering everything from basic tweens to keyframe sequences and secondary actions. Popmotion is the library that powers Framer Motion, so if you want fine-grained control over web animations without the framework overhead, this is a solid reference. The code snippets assume you know your way around JavaScript and DOM manipulation.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Popmotion Animation Principles

Implement all 12 Disney animation principles using Popmotion's composable animation functions.

1. Squash and Stretch

import { animate } from "popmotion";

animate({
  from: { scaleX: 1, scaleY: 1 },
  to: { scaleX: 1.2, scaleY: 0.8 },
  duration: 150,
  onUpdate: ({ scaleX, scaleY }) => {
    element.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
  }
});

2. Anticipation

// Wind up then action
animate({
  from: 0,
  to: 10,
  duration: 200,
  onUpdate: v => element.style.transform = `translateY(${v}px) scaleY(0.9)`,
  onComplete: () => {
    animate({
      from: 10,
      to: -200,
      duration: 400,
      ease: easeOut,
      onUpdate: v => element.style.transform = `translateY(${v}px)`
    });
  }
});

3. Staging

animate({
  from: 1,
  to: 0.6,
  onUpdate: v => bg.style.opacity = v
});
animate({
  from: 1,
  to: 1.1,
  onUpdate: v => hero.style.transform = `scale(${v})`
});