gsap-greensock

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

GSAP Animation Principles

GSAP动画原则

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

使用GSAP强大的时间轴（timeline）和补间（tween）系统实现全部12条迪士尼动画原则。

1. Squash and Stretch

1. 挤压与拉伸（Squash and Stretch）

javascript

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

javascript

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

2. Anticipation

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

javascript

const tl = gsap.timeline();
tl.to(".character", { y: 20, scaleY: 0.9, duration: 0.2 }) // 蓄力动作
  .to(".character", { y: -200, duration: 0.4, ease: "power2.out" }); // 主动作

3. Staging

3. 布局呈现（Staging）

javascript

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

javascript

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

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键帧动画（Straight Ahead / Pose to Pose）

javascript

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

javascript

// 使用显式关键帧的关键帧动画
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

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

javascript

const tl = gsap.timeline();
tl.to(".body", { x: 200, duration: 0.5 })
  .to(".hair", { x: 200, duration: 0.5 }, "-=0.4")  // 重叠执行
  .to(".cape", { x: 200, duration: 0.6 }, "-=0.45"); // 延迟跟随

6. Slow In and Slow Out

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"

javascript

gsap.to(".element", {
  x: 300,
  duration: 0.6,
  ease: "power2.inOut" // 缓入缓出
});
// 其他缓动函数："power3.in", "power3.out", "elastic.out"

7. Arc

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

javascript

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

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

javascript

const tl = gsap.timeline();
tl.to(".button", { scale: 1.1, duration: 0.2 })
  .to(".icon", { rotation: 15, duration: 0.15 }, "<") // 同时执行
  .to(".particles", { opacity: 1, stagger: 0.05 }, "<0.1");

9. Timing

9. 时间节奏（Timing）

javascript

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

javascript

// 快速移动
gsap.to(".fast", { x: 100, duration: 0.15 });
// 缓慢浮动
gsap.to(".slow", { y: -20, duration: 2, ease: "sine.inOut", yoyo: true, repeat: -1 });

10. Exaggeration

10. 夸张表现（Exaggeration）

javascript

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

javascript

gsap.to(".element", {
  scale: 1.5,        // 夸张缩放
  rotation: 720,     // 多圈旋转
  duration: 0.8,
  ease: "back.out(2)" // 过冲效果
});

11. Solid Drawing

11. 扎实造型（Solid Drawing）

javascript

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

javascript

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

12. Appeal

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

javascript

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

GSAP时间轴模式

javascript

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

javascript

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

Key GSAP Features

GSAP核心特性

```
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.timeline()
```
- 编排动画序列
```
ease
```
- 30+内置缓动函数
```
stagger
```
- 多元素动画偏移
```
motionPath
```
- 弧线与路径动画
```
yoyo
```
/
```
repeat
```
- 循环控制
```
"<"
```
/
```
"-=0.2"
```
- 用于实现动画重叠的位置参数