How to Use GSAP withClaude Code — The Right Way

TL;DR: Claude Code can write GSAP out of the box, but may produce outdated or incorrect patterns. GreenSock published an official skill package that fixes this — 8 specialized modules. Install with one command: /plugin marketplace add greensock/gsap-skills. After install, just describe animations in plain English and Claude handles the rest.

The Problem With “Claude Already Knows GSAP”

Yes, Claude Code has GSAP in its training data. You can ask it to animate something and it will produce working code. But working ≠ correct.

Without guidance, Claude might use left and top instead of x and y (which forces layout recalculation and tanks performance), skip gsap.registerPlugin(), forget to clean up animations in React, or use patterns that were valid in GSAP 2 but are wrong in GSAP 3.

Pattern	Without Skill	With Skill
Transform properties	❌ Uses left/top	✅ Uses x/y (GPU)
Plugin registration	❌ Often skipped	✅ Always included
React cleanup	❌ Memory leaks	✅ ctx.revert()
ScrollTrigger refresh	❌ Misses it	✅ Correct timing

The official GSAP skill solves this. It’s a set of instruction files that Claude Code reads before writing any animation code, teaching it the correct, modern patterns every time.

Installing in 30 Seconds

There are three ways to install. Pick the one that fits your setup:

Option A — Claude Code marketplace (recommended)

Open Claude Code in your terminal and run:

/plugin marketplace add greensock/gsap-skills

Option B — npx (works across 40+ AI agents)

npx skills add https://github.com/greensock/gsap-skills

Option C — Manual install

Clone the repo and copy the skills/ folder into ~/.claude/skills/.

💡 This is a skill plugin, not an MCP server. It’s much lighter — it doesn’t spin up a process or consume your context window the way MCP does. It just loads the right reference files when you’re working on animations.

What Gets Installed — 8 Skill Modules

The package loads 8 focused instruction modules. Claude Code picks the relevant ones based on what you’re building:

• gsap-core — gsap.to(), from(), fromTo(), easing, duration, stagger
• gsap-timeline — Sequences, position parameter, labels, nesting, playback
• gsap-scrolltrigger — Scroll animations, pinning, scrub, triggers, cleanup
• gsap-plugins — SplitText, Flip, Draggable, MorphSVG, DrawSVG (all now free)
• gsap-react — useGSAP hook, refs, gsap.context(), SSR-safe cleanup
• gsap-performance — GPU transforms, will-change, batching, 60fps patterns
• gsap-utils — clamp, mapRange, interpolate, snap, random, pipe
• gsap-frameworks — Vue, Svelte lifecycle, selector scoping, unmount cleanup

🎁 Worth noting: as of the Webflow acquisition, all GSAP plugins are now free — including SplitText, MorphSVG, DrawSVG, and CustomEase. The skill reflects this. No more separate Club GSAP license needed.

How to Work With It — Real Examples

Once installed, you just describe what you want in plain English. Claude Code applies the correct GSAP patterns automatically. Here’s what that looks like:

Basic entrance animation

Prompt: animate .hero: fade in and slide up from below, 0.6s, ease out

gsap.from(".hero", {
  y: 40,
  autoAlpha: 0,
  duration: 0.6,
  ease: "power2.out"
});

Staggered timeline sequence

Prompt: staggered entrance: title first, then subtitle after 0.2s, then CTA

const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.from(".title",    { y: 30, autoAlpha: 0 })
  .from(".subtitle", { y: 20, autoAlpha: 0 }, "+=0.2")
  .from(".cta",      { y: 15, autoAlpha: 0 }, "-=0.1");

ScrollTrigger with pinning

Prompt: pin .features section and animate each .card as user scrolls through it

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".card").forEach((card) => {
  gsap.from(card, {
    y: 60,
    autoAlpha: 0,
    duration: 0.7,
    ease: "power2.out",
    scrollTrigger: {
      trigger: card,
      start: "top 85%",
      end: "top 40%",
      toggleActions: "play none none reverse"
    }
  });
});

React with useGSAP

Prompt: add entrance animation to this React component — box scales in on mount, cleanup on unmount

import { useRef } from "react";
import { gsap } from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

export function Box() {
  const containerRef = useRef(null);

  useGSAP(() => {
    gsap.from(".box", { scale: 0.8, autoAlpha: 0, duration: 0.5 });
  }, { scope: containerRef });

  return (
    <div ref={containerRef}>
      <div className="box" />
    </div>
  );
}

🔑 Notice autoAlpha instead of opacity — the skill teaches Claude this pattern because it also sets visibility: hidden at 0, which is more performant and avoids flicker. These are the details that matter at production scale.

Bonus: Add the MCP Server for AI-Powered Animation Tools

If you want to go further, there’s also a community MCP server that gives Claude Code actual tools for GSAP — not just knowledge, but callable actions like understand_and_create_animation, debug_animation_issue, and optimize_for_performance.

claude mcp add-json gsap-master \
  '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'

Use this when you’re working on complex animation systems — hero sections with choreographed entrances, scroll storytelling, or debugging laggy mobile animations. For everyday work, the skill plugin is enough.

Quick Reference

• Install skill: /plugin marketplace add greensock/gsap-skills
• Or via npx: npx skills add https://github.com/greensock/gsap-skills
• All 8 modules are loaded — no config needed
• Use x/y not left/top, autoAlpha not opacity
• In React: always use useGSAP with scope + cleanup
• Call ScrollTrigger.refresh() after any layout change