Gsap Performance
Performance-focused GSAP guidance that pushes you toward compositor-friendly properties like transforms and opacity while steering you away from layout-thrashing culprits like width, height, and positioning properties. Covers the essentials: will-change hints, quickTo() for mouse followers, stagger for bulk animations, and ScrollTrigger optimization. The advice is practical and specific about what causes jank and how to avoid it. If you're building smooth 60fps animations or debugging choppy performance, this gives you the concrete dos and don'ts without the usual vague "optimize your code" handwaving.
- skills.sh installs
- 78.9K
- GitHub stars
- 18.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add greensock/gsap-skills --skill gsap-performance --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/greensock/gsap-skills
- Categories
- Frontend Development, Debugging, Design & UI/UX
More from greensock/gsap-skills
All 8Recommended
More Frontend Development
defuddleobsidianmd/obsidian-skillsExtract clean Markdown from HTML pages with Defuddle CLI.77Kskills.sh installs
make-interfaces-feel-betterjakubkrehel/make-interfaces-feel-betterDesign engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover stat76Kskills.sh installs
browser-testing-with-devtoolsaddyosmani/agent-skillsTests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture co67.7Kskills.sh installs
extension-to-functions-codebasefirebase/agent-skillsSkill for converting an installed Firebase Extension (or extension source) into a standalone Cloud Functions for Firebase codebase or publishable npm package, i63.5Kskills.sh installs
firecrawl-build-scrapefirecrawl/skillsIntegrate Firecrawl `/scrape` into product code for single-page extraction. Use when an app already has a URL and needs markdown, HTML, links, screenshots, meta62.6Kskills.sh installs
seam-craftheygen-com/hyperframesRender-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master ti61.1Kskills.sh installs