Gsap Performance

This is the official GSAP performance guide distilled into skill form. It covers the core rules for smooth 60fps animations: prefer transforms and opacity over layout-heavy properties like width and height, use will-change sparingly, batch DOM operations to avoid layout thrashing, and reach for quickTo() when animating properties on every mousemove or scroll. The advice on staggers versus separate tweens and cleaning up off-screen animations is solid. If you're chasing down jank or trying to hit 60fps on lower-end devices, this gives you the checklist. It's opinionated in the right way, basically the things the GSAP team has been saying for years compiled in one place.

skills.sh installs: 2.3K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill gsap-performance --agent claude-code

Installs into .claude/skills of the current project.

Files

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).