Optimize GSAP animations to reduce jank and achieve smooth 60fps.
npx skills add https://github.com/kartojal/openvps --skill gsap-performance-kartojal
Please help me install this Agent Skill. Skill: gsap-performance Source: https://github.com/kartojal/openvps/tree/main/.agents/skills/gsap-performance Command: npx skills add https://github.com/kartojal/openvps --skill gsap-performance-kartojal
Helps front-end developers and designers reduce animation jank and maintain smooth 60fps by providing GSAP-specific performance guidance that minimizes layout, paint, and compositor overhead.
Use the gsap-performance skill to analyze an animation and apply transforms and opacity, add will-change selectively, batch reads/writes, use stagger or gsap.quickTo(), and debounce ScrollTrigger.refresh to improve frame rate.
High-intent search queries and answers about installing and using this skill.
GSAP animation jank usually occurs when animating layout-heavy properties like width or top instead of transforms and opacity, forcing the browser to recalculate layout instead of using the compositor. Shifting work to transforms keeps animations smooth at 60fps.
For high-frequency mouse followers, use gsap.quickTo() to update properties efficiently and avoid creating new tweens continuously. This method minimizes overhead and maintains smooth frame rates during rapid updates.
To stop layout thrashing, batch DOM reads first, then perform writes, or let GSAP handle batched updates automatically. Grouping these operations prevents the browser from repeatedly recalculating layout during animation sequences.
Yes, excessive ScrollTrigger pinning and aggressive scrub values can impact scroll performance. Limit pinning, use appropriate scrub values, and debounce ScrollTrigger.refresh() to reduce the amount of processing work done during scrolling.
To optimize large staggered lists, use GSAP stagger configurations, implement DOM virtualization, or reuse timelines. This prevents hundreds of simultaneous tweens from overwhelming the browser and degrading animation frame rates.
Apply will-change sparingly only to elements that will actually animate to hint layer promotion to the compositor. Overusing will-change causes excessive memory consumption and can negatively impact overall page performance.
karenrebecagAnimate CSS properties and sequences with GSAP tween methods.
darenhartMeasure FPS, frame time, and memory usage to identify game bottlenecks.
nnececImplement scroll-driven animations and pinning with GSAP ScrollTrigger.
Tahona-AIAnalyze UI animation code to identify and fix performance bottlenecks.
