gsap-performance
Official GSAP skill for performance: prefer transforms, avoid layout thrashing, use will-change and batching.
- Kind
- Skill
- Works with
- Claude Code, Cursor
- Languages
- TypeScript / JavaScript
- Source
- GSAP skills (GreenSock) @ aed9cfd32777
- Path
- skills/gsap-performance/SKILL.md
- Jobs
- Review, Implementation
- Topics
- Motion graphics
Credit
- Made by
- greensock
- Original
- github.com/greensock/gsap-skills/blob/aed9cfd3277740755f6bfc1…
- License
- MIT
Listed by Skill Manifest; not made by us.
InstallInstall it with npx.
npx skills add https://github.com/greensock/gsap-skills
Install factsScanned 2 Nov 2026
- Adds
- .claude/skills/gsap-performance/ (the skill folder)
- Runs scripts
- None found
- Uses the network
- None found
- Needs secrets
- None found
- Source revision
- aed9cfd32777
- Licence
- MIT
- Last activity
- 29 Jul 2026
- Review
- Reviewed
Found by a static scan of the stored text; nothing is run. “None found” is not a guarantee, so read what you install before you run it.
- Only the main file is read; other files in the folder are not scanned
# 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. ```css will-change: transform; ``` ## Batch Reads and Writes …