---
id: daily-gsap-performance
name: "gsap-performance"
url: https://skills.yangsir.net/skill/daily-gsap-performance
author: greensock
domain: ai-frontend-engineering
tags: ["performance", "gsap", "animation", "optimization", "jank-free"]
install_count: 12100
rating: 4.50 (85 reviews)
github: https://github.com/greensock/gsap-skills
---

# gsap-performance

> GSAP 性能优化专家，实现 60fps 流畅动画，减少布局和绘制开销，解决卡顿问题

**Stats**: 12,100 installs · 4.5/5 (85 reviews)

## Before / After 对比

### 动画性能优化

**Before**:

动画出现掉帧和卡顿，手动分析性能瓶颈困难，不知道如何优化布局和绘制

**After**:

自动识别性能问题，应用最佳实践优化 transform 和 opacity，确保 60fps 流畅体验

| Metric | Before | After | Change |
|---|---|---|---|
| 帧率 | 30fps | 60fps | +100% |
| 卡顿时间 | 15% | 0% | -100% |

## Readme

# gsap-performance

# GSAP Performance

## 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**.

## Prefer Transform and 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.

## will-change

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

```
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).

## Many Elements (Stagger, Lists)

- 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.

## 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.

```
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

- **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.

## 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.

## 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.

Weekly Installs283Repository[greensock/gsap-skills](https://github.com/greensock/gsap-skills)GitHub Stars239First Seen1 day agoSecurity Audits[Gen Agent Trust HubPass](/greensock/gsap-skills/gsap-performance/security/agent-trust-hub)[SocketPass](/greensock/gsap-skills/gsap-performance/security/socket)[SnykPass](/greensock/gsap-skills/gsap-performance/security/snyk)Installed oncodex282kimi-cli281gemini-cli281amp281github-copilot281opencode281

---
*Source: https://skills.yangsir.net/skill/daily-gsap-performance*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-gsap-performance/markdown*