Which integrations are available for this server?

Provides surgical precision for generating, debugging, and optimizing high-performance animations using the GreenSock Animation Platform, including support for core methods and plugins like ScrollTrigger and SplitText. Supports the generation of project boilerplate and integration patterns for using GSAP within Next.js applications, including plugin registration and environment-specific setups. Generates production-ready GSAP implementations for React, utilizing specialized hooks like useGSAP and ensuring proper lifecycle management and memory cleanup. Enables complex SVG animations by leveraging GSAP's specialized plugins such as MorphSVG and DrawSVG for path manipulation and drawing effects.

How do I use Ultimate GSAP Master MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Ultimate GSAP Master MCP Server Make these cards fade in and stagger as I scroll down the page." That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

⚡ Ultimate GSAP Master MCP Server

The Ultimate GSAP Master MCP Server is a high-performance Model Context Protocol (MCP) implementation that grants AI models (like Claude) "surgical precision" over the GreenSock Animation Platform (GSAP).

It transforms natural language animation requests into production-ready, 60fps-optimized code. Whether you need a complex scroll-triggered sequence, character-by-character text reveals, or physics-based Draggable interfaces, this server provides the expert-level knowledge and implementation logic required.

✨ Features

🧠 Advanced Intent Analysis: Understands complex natural language requests (e.g., "Make these cards fade in one by one with a slight bounce when they hit the middle of the screen").
🚀 Production-Ready Code: Generates code with GPU acceleration (force3D), memory management (clearProps), and proper framework lifecycle handling (React useGSAP, cleanup, etc.).
📚 Complete API Database: Deep knowledge of every core method, easing function, and plugin (ScrollTrigger, SplitText, MorphSVG, DrawSVG, etc.).
🔧 Performance Optimization: Automatically refactors laggy animations into high-performance 60fps sequences.
🛠️ Expert Debugging: Analyzes code snippets for layout thrashing, missing plugin registrations, or logic errors.
🎁 All Plugins Included: Knowledge base updated for the GSAP era where SplitText, MorphSVG, and DrawSVG are now free.

🛠 Tools Included

Tool	Description
`understand_and_create_animation`	The flagship tool. Converts any animation idea into fully functional GSAP code.
`get_gsap_api_expert`	Provides deep technical documentation and examples for any GSAP method or plugin.
`generate_complete_setup`	Generates boilerplate for React, Next.js, Vue, or Vanilla, including plugin registration.
`debug_animation_issue`	Identifies and fixes bugs, performance bottlenecks, and logic errors.
`optimize_for_performance`	Refactors existing GSAP code to ensure 60fps smoothness and GPU acceleration.
`create_production_pattern`	Generates battle-tested patterns like Hero sequences, loading screens, and scroll systems.

🚀 Installation & Setup

Since this package is published as @vinhnguyen/gsap-mcp, you can use npx to run it without manual installation.

1. Claude Desktop Configuration

Open your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

2. Add the Server

Add the following entry to the mcpServers section:

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

3. Restart Claude

Restart the Claude Desktop application, and you will see a ⚡ icon indicating the GSAP Master tools are ready to use.

📖 Usage Examples

1. Natural Language Creation

User: "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."

AI (using Will generate a gsap.timeline() using SplitText for the characters, applying a back.out ease and a staggered random start time, followed by the subtitle animation.

2. Performance Refactoring

User: "My scroll animation is laggy on mobile. Here is the code: [code snippet animating

AI (using Will refactor the code to use x and y (transforms), add force3D: true, and implement ScrollTrigger.batch for better performance.

3. Setup Generation

User: "Set up a new Next.js project with ScrollTrigger and SplitText."

AI (using Will provide the terminal commands for installation, the gsap.registerPlugin boilerplate, and a useGSAP wrapper for your components.

📈 Performance Standards

Every piece of code generated by this server adheres to the following standards:

GPU Acceleration: Uses x, y, scale, and rotation instead of layout properties (top, width, height).
Memory Management: Includes clearProps and proper cleanup in framework hooks.
Reduced Motion: Respects prefers-reduced-motion media queries.
Efficiency: Uses GSAP's internal ticker and optimized batching for scroll events.