Motion One

This walks through all 12 Disney animation principles using Motion One, a 3kb animation library that wraps the Web Animations API. You get working examples for squash and stretch, anticipation, arcs, timing with spring physics, and the rest. The code is clean and shows practical patterns like stagger delays, scroll-linked animations, and timeline sequencing with the "at" parameter for precise timing control. If you're tired of bloated animation libraries or fighting with CSS keyframes, this gives you hardware-accelerated animations with a tiny bundle. The spring physics alone makes button interactions feel way better than standard easing curves.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Motion One Animation Principles

Implement all 12 Disney animation principles using Motion One's performant Web Animations API wrapper.

1. Squash and Stretch

import { animate } from "motion";

animate(".ball",
  { scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] },
  { duration: 0.3, easing: "ease-in-out" }
);

2. Anticipation

import { timeline } from "motion";

timeline([
  [".character", { y: 10, scaleY: 0.9 }, { duration: 0.2 }],
  [".character", { y: -200 }, { duration: 0.4, easing: "ease-out" }]
]);

3. Staging

animate(".background", { filter: "blur(3px)", opacity: 0.6 });
animate(".hero", { scale: 1.1 });

4. Straight Ahead / Pose to Pose

animate(".element", {
  x: [0, 100, 200, 300],
  y: [0, -50, 0, -30]
}, { duration: 1 });

5. Follow Through and Overlapping Action

timeline([
  [".body", { x: 200 }, { duration: 0.5 }],
  [".hair", { x: 200 }, { duration: 0.5, at: "-0.45" }],
  [".cape", { x: 200 }, { duration: 0.6, at: "-0.5" }]
]);