Agent skill · design visual · nexu-io
gsap-performance
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
Why this skill is useful
Provides specific performance optimization techniques for GSAP animations that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
GSAP Performance Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills 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. Batch Reads and Writes GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go). Many Elements (Stagger, Lists) Use stagger instead of many separate tweens with manual delays when the animation is the same; it’s more efficient. For long lists, consider virtualization or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank. Reuse timelines where possible; avoid creating new timelines every frame. Frequently updated properties (e.g. mouse followers) Prefer gsap.quickTo() for properties that are updated often (e.g. mouse-follower x/y). It reuses a single tween instead of creating new tweens on each update. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/gsap-performance