gsap-performance
Optimize GSAP animations for smooth 60fps by favoring transforms, batching DOM operations, and avoiding layout thrashing.
What it does
- ✅ Prefer: x, y, scale, rotation, opacity.
- ❌ Avoid when possible: width, height, top, left, margin, padding (they trigger layout and can cause jank).
- 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.
- 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.
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
Optimize GSAP animations for smooth 60fps by favoring transforms, batching DOM operations, and avoiding layout thrashing.
Source
Repository: https://github.com/greensock/gsap-skills
gsap-performance FAQ
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. ✅ Prefer: x, y, scale, rotation, opacity. ❌ Avoid when possible: width, height, top, left, margin, padding (they trigger layout and can cause jank).
How do I install gsap-performance?
Run: npx -y skills add https://github.com/greensock/gsap-skills --skill gsap-performance --agent claude-code — the source lives at github.com/greensock/gsap-skills.
Maintain gsap-performance?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/greensock-gsap-skills-gsap-performance?ref=badge) npx agentictools info skills/greensock-gsap-skills-gsap-performance The second line is the CLI lookup for this page — handy in READMEs and docs.
