Optimize GSAP animations for smooth 60fps performance.
npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-performance-nnecec
Please help me install this Agent Skill. Skill: gsap-performance Source: https://github.com/nnecec/nnecec.studio/tree/main/.agents/skills/gsap-performance Command: npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-performance-nnecec
GSAP animations can suffer from jank and layout thrash when not optimized; this skill provides guidance to keep motion smooth by encouraging transform-based properties, will-change usage, and batching strategies.
Optimize a GSAP animation for 60fps by prioritizing transform/opacity changes and avoiding layout thrash.
High-intent search queries and answers about installing and using this skill.
Prevent GSAP layout thrashing by batching DOM reads and writes together. This strategy minimizes synchronous recalculations and limits the number of simultaneous tweens to maintain smooth performance.
Improve ScrollTrigger performance by applying specific optimization techniques and utilizing cleanup routines. This ensures animations are properly managed and maintains long-term smoothness during complex timeline scenarios.
Use will-change to advise the browser of upcoming animated properties, which helps optimize rendering. It is most effective when applied during complex web UI transitions and timelines to sustain 60fps performance.
Web UI animation jank occurs when unoptimized GSAP properties trigger layout recalculations. Avoid animating layout-affecting properties and instead prefer transforms and opacity to keep motion smooth.
AlejandroFiginiOptimize GSAP animations with transforms and compositor-friendly practices.
software-mansionProfile React Native bottlenecks and apply targeted fixes with regression checks.
mohamedgshoaibIdentify and resolve UI animation performance issues in CSS, WAAPI, and JS-driven systems.
Logisoft-webImplement shaders, physics-based animations, and cinematic transitions with WebGL, CSS, and JavaScript.
