Gsap Greensock

dylantarre/animation-principles/skills/09-by-tool-framework/gsap-greensock

by dylantarre83597134ba8fNo license99 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 9 months ago

Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)

Instructions onlyDesign & Creative

AI-generated overview

Reference guide for implementing Disney's 12 animation principles with GSAP tweens and timelines.

What it does: This skill is an instructional reference that pairs each of Disney's 12 animation principles with GSAP code examples, covering squash and stretch, anticipation, staging, timing, arcs, exaggeration and appeal. It also shows GSAP timeline patterns and key features such as easing, stagger, motionPath, yoyo/repeat and position parameters. It produces guidance and code snippets rather than files or running code.
When to use it: Use it when building web animations with GSAP and you want to apply classic animation principles to tweens and timelines. It suits developers looking for concrete GSAP syntax for effects like anticipation, follow-through or exaggerated motion.
Requirements: Requires GSAP (GreenSock Animation Platform) in the target project; the skill itself ships no scripts and needs no credentials or network access.

GSAP Animation Principles

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

1. Squash and Stretch

javascript

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

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

2. Anticipation

javascript

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

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

javascript

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

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

4. Straight Ahead / Pose to Pose

javascript

// Pose to pose with explicit keyframesgsap.to(".sprite", {  keyframes: [    { x: 0, y: 0 },    { x: 100, y: -50 },    { x: 200, y: 0 },    { x: 300, y: -30 }  ],  duration: 1});

// Pose to pose with explicit keyframesgsap.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

javascript

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

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

javascript

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(".element", {  x: 300,  duration: 0.6,  ease: "power2.inOut" // slow in and out});// Other eases: "power3.in", "power3.out", "elastic.out"

7. Arc

javascript

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

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

javascript

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

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

javascript

// Fast snapgsap.to(".fast", { x: 100, duration: 0.15 });// Gentle floatgsap.to(".slow", { y: -20, duration: 2, ease: "sine.inOut", yoyo: true, repeat: -1 });

// Fast snapgsap.to(".fast", { x: 100, duration: 0.15 });// Gentle floatgsap.to(".slow", { y: -20, duration: 2, ease: "sine.inOut", yoyo: true, repeat: -1 });

10. Exaggeration

javascript

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

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

11. Solid Drawing

javascript

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

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

12. Appeal

javascript

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

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

javascript

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

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

Source and attribution

Source:dylantarre/animation-principlesinskills/09-by-tool-framework/gsap-greensockat commit8359713

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Gsap Greensock

GSAP Animation Principles

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

GSAP Timeline Pattern

Key GSAP Features

Source and attribution

More from dylantarre/animation-principles

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design