gsap-performance
Performance tips for transforms, will-change, batching, and ScrollT...
Developer Setup
Setup & Installation
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performancenpx skills add https://github.com/greensock/gsap-skills --skill gsap-performanceOverview
What This Skill Does
Performance tips for transforms, will-change, batching, and ScrollTrigger optimization
Application
When to use this Skill
- Integrating gsap performance into your development workflow.
- Following best practices for performance tips for transforms, will-change, batching, and scrolltrigger optimization.
- Automating repetitive tasks with AI-assisted tooling.
- Building production-grade applications with proper standards.
- Debugging and troubleshooting common implementation issues.
Documentation
Show Skills.md file
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;
Recommendations