Setup & Installation
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance
https://github.com/greensock/gsap-skills/tree/main/skills/gsap-performance
View on GitHubWhat This Skill Does
Guides GSAP animation optimization for consistent 60fps output. Covers which CSS properties to animate (transforms and opacity), how to avoid layout thrashing, and when to use tools like gsap.quickTo() and stagger. Applies to both simple tweens and complex scroll-driven sequences.
Instead of trial-and-error profiling, it gives concrete rules for which properties, APIs, and patterns avoid layout and paint costs in GSAP specifically.
When to use it
- Fixing jank in a scroll-triggered animation that drops frames on mid-range devices
- Replacing left/top position tweens with x/y transforms to move work off the main thread
- Setting up a mouse-follower that updates position on every mousemove without spawning new tweens
- Batching DOM reads before GSAP writes to prevent repeated layout recalculation
- Deciding when to call ScrollTrigger.refresh() after dynamic content loads