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 的技能

Lottie Bodymovin

Framer Motion

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design