From dylantarre-animation-principles
Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)
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 GSAP's powerful timeline and tween system.
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 GSAP's powerful timeline and tween system.
gsap.to(".ball", {
scaleX: 1.2,
scaleY: 0.8,
yoyo: true,
repeat: 1,
duration: 0.15,
ease: "power2.inOut"
});
const tl = gsap.timeline();
tl.to(".character", { y: 20, scaleY: 0.9, duration: 0.2 }) // wind up
.to(".character", { y: -200, duration: 0.4, ease: "power2.out" }); // action
gsap.to(".background", { filter: "blur(3px)", opacity: 0.6 });
gsap.to(".hero", { scale: 1.1, zIndex: 10 });
// Pose to pose with explicit keyframes
gsap.to(".sprite", {
keyframes: [
{ x: 0, y: 0 },
{ x: 100, y: -50 },
{ x: 200, y: 0 },
{ x: 300, y: -30 }
],
duration: 1
});
const tl = gsap.timeline();
tl.to(".body", { x: 200, duration: 0.5 })
.to(".hair", { x: 200, duration: 0.5 }, "-=0.4") // overlaps
.to(".cape", { x: 200, duration: 0.6 }, "-=0.45"); // more drag
gsap.to(".element", {
x: 300,
duration: 0.6,
ease: "power2.inOut" // slow in and out
});
// Other eases: "power3.in", "power3.out", "elastic.out"
gsap.to(".ball", {
motionPath: {
path: [{ x: 0, y: 0 }, { x: 100, y: -100 }, { x: 200, y: 0 }],
curviness: 1.5
},
duration: 1
});
const tl = gsap.timeline();
tl.to(".button", { scale: 1.1, duration: 0.2 })
.to(".icon", { rotation: 15, duration: 0.15 }, "<") // same time
.to(".particles", { opacity: 1, stagger: 0.05 }, "<0.1");
// Fast snap
gsap.to(".fast", { x: 100, duration: 0.15 });
// Gentle float
gsap.to(".slow", { y: -20, duration: 2, ease: "sine.inOut", yoyo: true, repeat: -1 });
gsap.to(".element", {
scale: 1.5, // exaggerated scale
rotation: 720, // multiple spins
duration: 0.8,
ease: "back.out(2)" // overshoot
});
gsap.to(".box", {
rotationX: 45,
rotationY: 30,
transformPerspective: 1000,
duration: 0.5
});
gsap.to(".card", {
scale: 1.02,
boxShadow: "0 20px 40px rgba(0,0,0,0.2)",
duration: 0.3,
ease: "power1.out"
});
const masterTL = gsap.timeline({ defaults: { ease: "power2.out" }});
masterTL
.add(anticipation())
.add(mainAction())
.add(followThrough());
gsap.timeline() - Sequence animationsease - 30+ built-in easing functionsstagger - Offset multiple elementsmotionPath - Arc and path animationsyoyo / repeat - Loop control"<" / "-=0.2" - Position parameter for overlap