gsap-performance
GSAP performance guidance — prefer transforms, avoid layout thrashing, use will-change selectively, and batch animation work. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
npx skills add TheGoat395/Codex-Skills --skill gsap-performance --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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:** `motion-performance-qa`, `animation-jank-qa`, `animation-tool-router`, and `reduced-motion-design`. ## 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** because they trigger layout and can cause jank. GSAP's **x** and **y** use transforms by default; use them instead of **left**/**top** for movement. ## will-change Use **will-change** selectively on elements that will animate soon. It hints the browser to prepare for animation work, but overusing it can increase memory pressure. ```css will-change: transform; ``` Remove or narrow `will-change` when an e
- When to Use This Skill
- Prefer Transform and Opacity
- will-change
- Batch Reads and Writes
- Many Elements: Staggers and Lists
- Frequently Updated Properties
- ScrollTrigger and Performance
- Reduce Simultaneous Work
- Best Practices
- Do Not
What does the gsap-performance skill do?
GSAP performance guidance — prefer transforms, avoid layout thrashing, use will-change selectively, and batch animation work. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
How do I install it?
Run `npx skills add TheGoat395/Codex-Skills --skill gsap-performance --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TheGoat395/Codex-Skills, a repository with 115 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.