gsap-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

GSAP Performance

GSAP 性能优化

When to Use This Skill

何时使用该技巧

Apply when optimizing GSAP animations for smooth 60fps, reducing layout/paint cost, or when the user asks about performance, jank, or best practices for fast animations.

Related skills: Build animations with gsap-core (transforms, autoAlpha) and gsap-timeline; for ScrollTrigger performance see gsap-scrolltrigger.

当你需要优化GSAP动画以实现流畅60帧、降低布局/绘制成本，或用户询问性能、卡顿问题，以及快速动画的最佳实践时，可应用本技巧。

相关技能： 使用gsap-core（transform、autoAlpha）和gsap-timeline创建动画；有关ScrollTrigger性能的内容请查看gsap-scrolltrigger。

Prefer Transform and Opacity

优先使用Transform与Opacity

Animating transform (

scaleX

scaleY

rotation

rotationX

rotationY

skewX

skewY

) and opacity keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.

✅ Prefer: x, y, scale, rotation, opacity.
❌ Avoid when possible: width, height, top, left, margin, padding (they trigger layout and can cause jank).

GSAP’s x and y use transforms (translate) by default; use them instead of left/top for movement.

对transform（

、

scaleX

、

scaleY

、

rotation

、

rotationX

、

rotationY

、

skewX

、

skewY

）和opacity进行动画，会让工作在合成器上完成，避免布局和大部分绘制操作。当transform可以实现相同效果时，避免对布局密集型属性执行动画。

✅ 优先选择：x、y、scale、rotation、opacity。
❌ 尽可能避免：width、height、top、left、margin、padding（它们会触发布局并导致卡顿）。

GSAP的x和y默认使用transform（translate）；移动元素时请使用它们替代left/top。

will-change

Use will-change in CSS on elements that will animate. It hints the browser to promote the layer.

css

will-change: transform;

在CSS中对即将执行动画的元素使用will-change，它会提示浏览器提升该元素的图层。

css

will-change: transform;

Batch Reads and Writes

批量读取与写入

GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).

GSAP内部会批量处理更新。当将GSAP与直接DOM读取/写入或依赖布局的代码混合使用时，避免交替进行读取和写入操作，以免造成重复布局抖动。优先先完成所有读取操作，再执行所有写入操作（或让GSAP一次性处理所有写入）。

Many Elements (Stagger, Lists)

多元素场景（Stagger、列表）

Use stagger instead of many separate tweens with manual delays when the animation is the same; it’s more efficient.
For long lists, consider virtualization or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank.
Reuse timelines where possible; avoid creating new timelines every frame.

当动画效果相同时，使用stagger替代多个带手动延迟的独立补间动画，这样更高效。
对于长列表，考虑使用虚拟化或仅对可见元素执行动画；如果创建数百个同时运行的补间动画会导致卡顿，请避免这样做。
尽可能复用时间线；避免在每一帧都创建新的时间线。

Frequently updated properties (e.g. mouse followers)

频繁更新的属性（如鼠标跟随器）

Prefer gsap.quickTo() for properties that are updated often (e.g. mouse-follower x/y). It reuses a single tween instead of creating new tweens on each update.

javascript

let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
    yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });

document.querySelector("#container").addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});

对于频繁更新的属性（如鼠标跟随器的x/y），优先使用gsap.quickTo()。它会复用单个补间动画，而非在每次更新时创建新的补间。

javascript

let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
    yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });

document.querySelector("#container").addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});

ScrollTrigger and Performance

ScrollTrigger与性能

pin: true promotes the pinned element; pin only what’s needed.
scrub with a small value (e.g.
```
scrub: 1
```
) can reduce work during scroll; test on low-end devices.
Call ScrollTrigger.refresh() only when layout actually changes (e.g. after content load), not on every resize; debounce when possible.

pin: true会提升固定元素的层级；仅固定必要的元素。
使用较小值的scrub（如
```
scrub: 1
```
）可以减少滚动时的工作量；请在低端设备上进行测试。
仅当布局实际发生变化时（如内容加载后）才调用ScrollTrigger.refresh()，不要在每次调整窗口大小时都调用；尽可能使用防抖处理。

Reduce Simultaneous Work

减少同时执行的任务

Pause or kill off-screen or inactive animations when they’re not visible (e.g. when the user navigates away).
Avoid animating huge numbers of properties on many elements at once; simplify or sequence if needed.

当动画不可见时（如用户导航至其他页面），暂停或终止屏幕外或非活跃的动画。
避免同时对大量元素的大量属性执行动画；如有需要，请简化动画或按顺序执行。

Best practices

最佳实践

✅ Animate transform and opacity; use will-change in CSS only on elements that animate.
✅ Use stagger instead of many separate tweens with manual delays when the animation is the same.
✅ Use gsap.quickTo() for frequently updated properties (e.g. mouse followers).
✅ Clean up or kill off-screen animations; call ScrollTrigger.refresh() when layout changes, debounced when possible.

✅ 对transform和opacity执行动画；仅对实际要执行动画的元素在CSS中使用will-change。
✅ 当动画效果相同时，使用stagger替代多个带手动延迟的独立补间动画。
✅ 对频繁更新的属性（如鼠标跟随器）使用gsap.quickTo()。
✅ 清理或终止屏幕外的动画；仅在布局变化时调用ScrollTrigger.refresh()，尽可能使用防抖处理。

Do Not

禁忌

❌ Animate width/ height/ top/ left for movement when x/ y/ scale can achieve the same look.
❌ Set will-change or force3D on every element “just in case”; use for elements that are actually animating.
❌ Create hundreds of overlapping tweens or ScrollTriggers without testing on low-end devices.
❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.

❌ 当使用x/y/scale可以实现相同效果时，不要为移动元素而对width/height/top/left执行动画。
❌ 不要“以防万一”地在每个元素上设置will-change或force3D；仅对实际要执行动画的元素使用。
❌ 在未在低端设备上测试的情况下，创建数百个重叠的补间动画或ScrollTrigger。
❌ 忽略清理工作；残留的补间动画和ScrollTrigger会持续运行，可能影响性能和正确性。