What is gsap-greensock?

This Claude skill enables developers to seamlessly implement Disney's 12 classic animation principles using the GreenSock Animation Platform (GSAP). It provides ready-to-use code snippets and logic for creating professional, lifelike web animations, covering everything from basic easing to complex timeline sequencing and motion paths. By bridging traditional animation theory with modern JavaScript implementation, it helps create highly engaging and polished user interfaces.

When should I use gsap-greensock?

gsap-greensock is useful in the following scenarios: • Developing high-end landing pages that require organic, lifelike motion to increase user engagement and brand appeal. • Enhancing UI/UX by applying 'Squash and Stretch' or 'Anticipation' to interactive elements like buttons, cards, and modals. • Creating complex, multi-stage web animations using GSAP Timelines to manage 'Follow Through' and 'Overlapping Action'. • Implementing physics-based movement and natural 'Arcs' for character animations or data visualizations in web applications. • Refining micro-interactions with professional easing functions to achieve perfect 'Slow In and Slow Out' timing.

name	gsap-greensock
description	Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)

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

6. Slow In and Slow Out

gsap.to(".element", {
  x: 300,
  duration: 0.6,
  ease: "power2.inOut" // slow in and out
});
// Other eases: "power3.in", "power3.out", "elastic.out"

7. Arc

gsap.to(".ball", {
  motionPath: {
    path: [{ x: 0, y: 0 }, { x: 100, y: -100 }, { x: 200, y: 0 }],
    curviness: 1.5
  },
  duration: 1
});

8. Secondary Action

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");

9. Timing

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

10. Exaggeration

gsap.to(".element", {
  scale: 1.5,        // exaggerated scale
  rotation: 720,     // multiple spins
  duration: 0.8,
  ease: "back.out(2)" // overshoot
});

11. Solid Drawing

gsap.to(".box", {
  rotationX: 45,
  rotationY: 30,
  transformPerspective: 1000,
  duration: 0.5
});

12. Appeal

gsap.to(".card", {
  scale: 1.02,
  boxShadow: "0 20px 40px rgba(0,0,0,0.2)",
  duration: 0.3,
  ease: "power1.out"
});

GSAP Timeline Pattern

const masterTL = gsap.timeline({ defaults: { ease: "power2.out" }});
masterTL
  .add(anticipation())
  .add(mainAction())
  .add(followThrough());

Key GSAP Features

gsap.timeline() - Sequence animations
ease - 30+ built-in easing functions
stagger - Offset multiple elements
motionPath - Arc and path animations
yoyo / repeat - Loop control
"<" / "-=0.2" - Position parameter for overlap

gsap-greensock

When & Why to Use This Skill

Use Cases