Gsap Greensock

If you're building animations that need to feel professionally crafted rather than just technically correct, this maps Disney's 12 animation principles directly to GSAP code patterns. You get squash and stretch with scaleX/scaleY tweens, anticipation through timeline sequencing, follow-through with stagger offsets, and arc motion with motionPath. The examples are copy-paste ready and show the actual GSAP syntax for timing overlaps, easing curves, and keyframe positioning. It won't teach you animation theory from scratch, but if you already know what these principles mean visually, it gives you the exact GSAP implementation for each one. Think of it as a reference card for translating animation instinct into GreenSock API calls.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

GSAP Animation Principles

Implement all 12 Disney animation principles using GSAP's powerful timeline and tween system.

1. Squash and Stretch

gsap.to(".ball", {
  scaleX: 1.2,
  scaleY: 0.8,
  yoyo: true,
  repeat: 1,
  duration: 0.15,
  ease: "power2.inOut"
});

2. Anticipation

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

3. Staging

gsap.to(".background", { filter: "blur(3px)", opacity: 0.6 });
gsap.to(".hero", { scale: 1.1, zIndex: 10 });

4. Straight Ahead / Pose to Pose

// 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
});

5. Follow Through and Overlapping Action

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