gsap-performance
Installation
SKILL.md
Performance
Animate compositor-only properties, avoid layout props, use will-change sparingly, force3D, ScrollTrigger performance, and reduced motion via gsap.matchMedia().
60fps means every frame has ~16ms of budget. Animating the wrong property blows that budget by forcing the browser to recalculate layout and repaint on every frame. GSAP is fast, but it can only be as fast as the properties you ask it to change.
Animate transform and opacity Only
The browser can move, scale, rotate, and fade an element on the compositor thread (GPU) without touching layout or paint. GSAP exposes shorthand transform properties — use them.
| GSAP property | Maps to | Cheap? |
|---|---|---|
x, y |
translate3d(...) |
Yes |
xPercent, yPercent |
translate in % of the element's own size |
Yes |
scale, scaleX, scaleY |
scale(...) |
Yes |
rotation, rotationX/Y |
rotate(...) |
Yes |
skewX, skewY |
skew(...) |
Yes |
opacity |
opacity |
Yes |