Model Context Protocol Server

Surgical Precision GSAP Animations for Claude

Transform natural language into production-ready, 60fps-optimized animation code. Expert debugging, performance tuning, and full plugin knowledge built in.

Get Started View Source

claude-desktop-mcp

❯ understand_and_create_animation()// Request:
"Cards fade in one by one with
 a bounce when scrolled into view"

// Generated:
✔ ScrollTrigger.batch() configured
✔ GPU-accelerated transforms
✔ useGSAP hook with cleanup
✔ 60fps optimized

Everything for Production Animations

GSAP Master MCP bridges the gap between your creative vision and performant animation code.

Natural Language to Code

Describe any animation in plain English. Get back production-ready GSAP code with GPU acceleration and proper lifecycle handling.

60fps Performance

Every generated snippet uses transforms over layout properties, force3D acceleration, and optimized batching for buttery smooth animations.

Expert Debugging

Paste your buggy animation code. Get analysis of layout thrashing, missing plugin registrations, and logic errors with fixes.

All Plugins Included

Deep knowledge of ScrollTrigger, SplitText, MorphSVG, DrawSVG, Draggable, and Lenis smooth scrolling integration.

Framework Ready

Generates code for React (useGSAP), Next.js, Vue, or Vanilla JS with proper plugin registration and cleanup.

Production Patterns

Battle-tested patterns for hero sequences, loading screens, scroll-driven narratives, and page transitions.

Quick Setup

Integrate GSAP Master into your Claude workflow in seconds.

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "gsap-master": {
      "command": "npx",
      "args": ["-y", "@vinhnguyen/gsap-mcp"]
    }
  }
}

Continue.dev (VS Code)

Add to your ~/.continue/config.yaml:

mcpServers:
  - name: gsap-mcp
    command: npx
    args:
      - "-y"
      - "@vinhnguyen/gsap-mcp"

Available MCP Tools

GSAP Master exposes these capabilities to Claude. Ask Claude to use them naturally in conversation.

Category	Tool Name	Description
Create	understand_and_create_animation	The flagship tool. Converts any animation idea into fully functional GSAP code
Reference	get_gsap_api_expert	Deep technical documentation for any GSAP method, plugin, or property
Setup	generate_complete_setup	Generate boilerplate for React, Next.js, Vue, or Vanilla with plugin registration
Debug	debug_animation_issue	Identify and fix bugs, performance bottlenecks, and logic errors
Optimize	optimize_for_performance	Refactor existing GSAP code to ensure 60fps smoothness and GPU acceleration
Patterns	create_production_pattern	Generate battle-tested animation patterns for common UI scenarios

Try These Prompts

Once installed, try asking Claude these questions:

Create from Description

"I want a hero section where the title letters pop up randomly, and then the subtitle slides in from the left once the title is finished."

Fix Performance

"My scroll animation is laggy on mobile. Here is the code: [paste code animating top and left properties]."

Recreate from Video

"I've uploaded a video of an animation. Please watch it carefully. Analyze the timing, the easing curves, and the sequence of elements. Then, use the understand_and_create_animation tool to recreate this exactly for a React project, ensuring 60fps performance."