Gsap Greensock

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

作者 dylantarre83597134ba8f無授權條款99 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫9 個月前更新

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

僅含說明Design & Creative

AI 產生的概覽

以 GSAP 補間與時間軸實作迪士尼十二項動畫原則的參考指南。

功能: 這項技能是一份教學參考，將迪士尼十二項動畫原則逐條對應到 GSAP 程式碼範例，涵蓋擠壓拉伸、預備動作、場面調度、時間節奏、弧線、誇張與吸引力等。它也展示 GSAP 時間軸模式，以及緩動、交錯、motionPath、yoyo/repeat 和位置參數等關鍵功能。產出的是指引說明與程式碼片段，而非檔案或可執行的程式碼。
適用情境: 在使用 GSAP 製作網頁動畫，並希望把經典動畫原則套用到補間與時間軸時使用。適合需要具體 GSAP 語法來實現預備動作、跟隨動作或誇張效果等效果的開發者。
執行需求: 目標專案需要安裝 GSAP（GreenSock 動畫平台）；這項技能本身不含指令碼，也不需要憑證或網路存取。

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

來源與署名

來源：dylantarre/animation-principles位於skills/09-by-tool-framework/gsap-greensock提交8359713

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

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

來源與署名

更多來自 dylantarre/animation-principles 的技能

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design