gsap-performance
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
Profile →npx skills add nexu-io/open-design --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 > Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills ## 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.
- When to Use This Skill
- Prefer Transform and Opacity
- will-change
- Batch Reads and Writes
- Many Elements (Stagger, Lists)
- Frequently updated properties (e.g. mouse followers)
- ScrollTrigger and Performance
- Reduce Simultaneous Work
- Best practices
- Do Not
What does the gsap-performance skill do?
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. 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 nexu-io/open-design --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 nexu-io/open-design, a repository with 83,577 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.