From dylantarre-animation-principles
Use when implementing Disney's 12 animation principles with Popmotion's functional animation library
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Implement all 12 Disney animation principles using Popmotion's composable animation functions.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Implement all 12 Disney animation principles using Popmotion's composable animation functions.
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})`;
}
});
// 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)`
});
}
});
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})`
});
import { keyframes } from "popmotion";
keyframes({
values: [
{ x: 0, y: 0 },
{ x: 100, y: -50 },
{ x: 200, y: 0 },
{ x: 300, y: -30 }
],
duration: 1000,
onUpdate: ({ x, y }) => {
element.style.transform = `translate(${x}px, ${y}px)`;
}
});
animate({ from: 0, to: 200, duration: 500,
onUpdate: v => body.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 500, elapsed: -50, // delay
onUpdate: v => hair.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 600, elapsed: -100,
onUpdate: v => cape.style.transform = `translateX(${v}px)` });
import { animate, easeInOut, easeIn, easeOut } from "popmotion";
animate({
from: 0,
to: 300,
duration: 600,
ease: easeInOut,
onUpdate: v => element.style.transform = `translateX(${v}px)`
});
keyframes({
values: [
{ x: 0, y: 0 },
{ x: 100, y: -100 },
{ x: 200, y: 0 }
],
duration: 1000,
ease: easeInOut,
onUpdate: ({ x, y }) => {
element.style.transform = `translate(${x}px, ${y}px)`;
}
});
// Primary action triggers secondary
animate({
from: 1, to: 1.1, duration: 200,
onUpdate: v => button.style.transform = `scale(${v})`,
onComplete: () => {
animate({
from: 0, to: 15, duration: 150,
onUpdate: v => icon.style.transform = `rotate(${v}deg)`
});
}
});
import { spring } from "popmotion";
// Fast
animate({ from: 0, to: 100, duration: 150 });
// Spring physics
spring({
from: 0,
to: 100,
stiffness: 300,
damping: 20,
onUpdate: v => element.style.transform = `translateX(${v}px)`
});
// Slow
animate({ from: 0, to: 100, duration: 800, ease: easeOut });
spring({
from: { scale: 1, rotate: 0 },
to: { scale: 1.5, rotate: 720 },
stiffness: 200,
damping: 10, // low = overshoot
onUpdate: ({ scale, rotate }) => {
element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}
});
animate({
from: { rotateX: 0, rotateY: 0 },
to: { rotateX: 45, rotateY: 30 },
duration: 500,
onUpdate: ({ rotateX, rotateY }) => {
box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}
});
animate({
from: 1,
to: 1.02,
duration: 300,
ease: easeOut,
onUpdate: v => {
card.style.transform = `scale(${v})`;
card.style.boxShadow = `0 ${20*v}px 40px rgba(0,0,0,${0.2*v})`;
}
});
animate() - Tween animationsspring() - Physics-based springkeyframes() - Multi-step animationsdecay() - Momentum/inertiaeaseIn, easeOut, easeInOut - Easing functions