mcpField
G
gsap-greensock

gsap-greensock

github.com/dylantarreDesign & UI132735 installsUpdated 43w ago
Repository

About gsap-greensock

A guide to using GSAP timelines and tweens to apply Disney’s 12 animation principles. It is for developers creating web animations, with examples of easing, motion paths, sequencing, and overlap.

Key features

  1. 01Examples for 12 animation principles
  2. 02Timeline-based animation sequencing
  3. 03Easing, stagger, and loop controls
  4. 04Motion-path and overlap techniques

Use cases

  1. 01Animating characters or interface elements
  2. 02Sequencing multi-part motion
  3. 03Creating curved movement and staggered effects

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill gsap-greensock

After installing, type/gsap-greensockin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported