Back to Details

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 (
x
, 
y
, 
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（
x
、
y
、
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

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会持续运行，可能影响性能和正确性。