Smooth 60fps GSAP animations with the gsap-performance skill

Where this fits

You're building a product page with a hero animation that stutters on mid-range phones. You've already tuned easing and durations, but the frame rate still drops. You need a quick, authoritative answer on what to change: which properties are safe to animate, how to batch tweens, and when to use will-change. The gsap-performance skill plugs directly into your coding agent so it can give you that answer without leaving your editor.

Why agents benefit

• Prevents layout thrashing checks: The skill teaches agents to audit animations for layout-triggering properties like width and left, and suggest transform-based alternatives.
• Enforces compositor-friendly choices: Agents apply the official guidance to prefer x, y, scale, rotation, and opacity over expensive properties.
• Applies context-aware batching: When multiple elements animate, the agent can group tweens into families or use batch to reduce style recalculation and paint calls.
• Gives precise will-change usage: It tells agents when (and when not) to add will-change, avoiding memory bloat and unnecessary layers.
• Integrates with other GSAP skills: Combines with gsap-core and gsap-timeline to produce full, optimized animation setups.

Practical scenarios

Debugging jank in a ScrollTrigger-powered gallery

Your agent sees a ScrollTrigger that animates top and left for parallax. Using the skill, it rewrites the animation to use yPercent and xPercent, then suggests a will-change: transform on the trigger start and removal on leave--removing the stutter.

Building a dashboard with many simultaneous tweens

When you ask for a staggered entrance for 30 chart bars, the agent uses gsap.to(..., { stagger: { each: 0.02, from: "start" } }) and ensures all targets share a common parent with batch to minimize layout reads. It also flags any accidental margin animations.

Auditing an existing animation library

The skill helps your agent scan a legacy component that animates height for accordions. It suggests swapping to scaleY with a transformOrigin and provides a drop-in code change, plus a note on how to handle the visual difference.

Add it to your agent workflow

Install the skill with:

npx skills add greensock/gsap-skills --skill gsap-performance

Then in your prompt, ask: "Optimize this GSAP animation to hit 60fps on mobile" and the agent will apply the skill's rules. For example, it might convert a width tween to scaleX and add force3D: true for the compositor—complete with a before/after performance estimate.

Compare before adopting

Before trusting any skill, check its quality signals: does the README show concrete examples and edge cases? Is the repository actively maintained? The official GSAP skills repo has 13.8k stars and is from Greensock, the library's author—a strong freshness signal. Compare it with generic animation tips from community snippets, which may be outdated or miss browser quirks. Also consider how well it fits your agent's existing toolchain: it works alongside other GSAP skills, so if you already use those, adoption is seamless. You can evaluate the skill's effectiveness by running a quick performance audit before and after applying its suggestions.

Why it is worth tracking

GSAP is the industry standard for high‑end web animation, and the official skills repo signals that performance best practices are now codified and continuously updated. The skill’s popularity (13.8k stars) and direct author support mean it will stay aligned with GSAP’s evolving API and browser performance nuances. If you’re building agents that touch any front‑end animation, this skill is a low‑risk, high‑value addition—track it to keep your agents from giving outdated advice. For a broader overview of agent skills, you can explore OpenAgentSkill to see how it fits into your workflow.