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.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
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.
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.
🧠 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.
🧈 Lenis Smooth Scrolling: Built-in support for Lenis integration with ScrollTrigger, including setup, React hooks, and best practices.
Related MCP server: GSAP Master MCP Server
Tool | Description |
| The flagship tool. Converts any animation idea into fully functional GSAP code. |
| Provides deep technical documentation and examples for any GSAP method or plugin. |
| Generates boilerplate for React, Next.js, Vue, or Vanilla, including plugin registration. |
| Identifies and fixes bugs, performance bottlenecks, and logic errors. |
| Refactors existing GSAP code to ensure 60fps smoothness and GPU acceleration. |
| Generates battle-tested patterns like Hero sequences, loading screens, and scroll systems. |
Since this package is published as @vinhnguyen/gsap-mcp, you can use npx to run it without manual installation.
Open your Claude Desktop configuration file:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Add the following entry to the mcpServers section:
{
"mcpServers": {
"gsap-master": {
"command": "npx",
"args": [
"-y",
"@vinhnguyen/gsap-mcp"
]
}
}
}Restart the Claude Desktop application, and you will see a ⚡ icon indicating the GSAP Master tools are ready to use.
Add the following to your ~/.continue/config.yaml:
mcpServers:
- name: gsap-mcp
command: npx
args:
- "-y"
- "@vinhnguyen/gsap-mcp"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 understand_and_create_animation): 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.
User: "My scroll animation is laggy on mobile. Here is the code: [code snippet animating top and left properties]."
AI (using optimize_for_performance): Will refactor the code to use x and y (transforms), add force3D: true, and implement ScrollTrigger.batch for better performance.
User: "Set up a new Next.js project with ScrollTrigger and SplitText."
AI (using generate_complete_setup): Will provide the terminal commands for installation, the gsap.registerPlugin boilerplate, and a useGSAP wrapper for your components.
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.
MIT
Created by Vinh Nguyen - Powered by GSAP Surgical Precision. ⚡
Generate battle-tested, production-ready animation patterns
| Name | Required | Description | Default |
|---|---|---|---|
| pattern_type | Yes | Type of production pattern needed | |
| industry | No | Industry or use case | portfolio |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, and the description does not disclose behavioral traits such as side effects, idempotency, or required permissions. The agent cannot determine if this tool creates a file, returns data, or modifies state.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single concise sentence with no extraneous words. It is front-loaded with the action. However, it could be expanded slightly to include more context without becoming verbose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given that the tool has only 2 parameters and no output schema, the description is too minimal. It does not explain the return value, format, or how the pattern is delivered. The agent lacks key information to use the tool effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with both parameters described. The description adds no additional meaning beyond the schema; it merely repeats 'production-ready patterns' without explaining how parameters influence output. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Generate battle-tested, production-ready animation patterns' clearly states the action (generate) and the resource (animation patterns). It distinguishes from sibling tools which focus on debugging, setup, optimization, or expertise. However, it could be more specific about what 'battle-tested' entails.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives. There is no mention of conditions, exceptions, or when not to use it. The agent has to infer usage from the name and description alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Expert debugging for GSAP animation problems with solutions
| Name | Required | Description | Default |
|---|---|---|---|
| issue | Yes | Description of the animation problem or unexpected behavior | |
| code | No | Problematic animation code (optional but helpful) | |
| expected_behavior | No | What should happen vs what is happening |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, and the description does not disclose behavioral specifics such as whether it analyzes code, generates fixes, or explains issues. It does not mention limitations, prerequisites, or what constitutes a 'solution'.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence with no redundant information. Every word is necessary and front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Tool has 3 parameters and no output schema, but the description is too brief to convey what the tool does with the inputs (e.g., whether it returns explanations, code snippets, or steps). Lacks expected return value or behavior.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema descriptions cover all parameters (100% coverage), so the baseline is 3. The description adds no additional semantics beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states it debugs GSAP animation problems and provides solutions. It differentiates from siblings like 'get_gsap_api_expert' (API reference) and 'understand_and_create_animation' (creation focus), but does not explicitly state the distinction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus others like 'get_gsap_api_expert' or 'understand_and_create_animation'. The description does not provide context for selection or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Generate complete GSAP environment setup with all plugins and optimizations
| Name | Required | Description | Default |
|---|---|---|---|
| framework | Yes | Target framework | react |
| plugins | No | Specific plugins needed | |
| performance_level | No | Performance optimization level | optimized |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description should disclose behavioral traits, but it only says 'generate complete setup' without explaining side effects, idempotency, or required permissions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence with no superfluous words, clearly front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Lacks information about output, prerequisites, or what 'complete setup' entails; insufficient for a generation tool with 3 parameters.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the description adds no extra meaning beyond the schema. Baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb 'Generate' and a clear resource 'complete GSAP environment setup', distinguishing it from sibling tools like 'create_production_pattern' and 'debug_animation_issue'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives; no mention of prerequisites, exclusions, or context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Deep dive into any GSAP method, plugin, or property with expert-level knowledge
| Name | Required | Description | Default |
|---|---|---|---|
| api_element | Yes | GSAP API element (e.g., "gsap.to", "ScrollTrigger", "SplitText", "drawSVG", "morphSVG") | |
| level | No | Detail level needed | advanced |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It only says 'deep dive' but does not disclose the output format (e.g., text, structured data), whether it is read-only, or any side effects, auth requirements, or rate limits. The agent has little transparency into the tool's behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single concise sentence that front-loads the purpose. No filler or redundant information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given that there is no output schema and the tool is about expert-level knowledge, the description is too short. It does not explain what 'expert-level knowledge' entails or the format of the response. The agent lacks context on the depth and structure of the information returned.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema covers 100% of parameters with descriptions: 'api_element' is described with examples (e.g., 'gsap.to', 'ScrollTrigger') and 'level' has an enum. The description adds no additional meaning beyond the schema, so baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Deep dive into any GSAP method, plugin, or property with expert-level knowledge' clearly states the tool's purpose: providing expert information on GSAP APIs. It distinguishes well from sibling tools like debug_animation_issue or create_production_pattern, which focus on debugging or creating animations.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use when expert-level knowledge on a specific GSAP API element is needed, but it does not explicitly state when to use or not use this tool compared to siblings. No alternative tools or exclusions are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Transform any animation into 60fps smoothness with expert optimizations
| Name | Required | Description | Default |
|---|---|---|---|
| animation_code | Yes | Existing GSAP animation code to optimize | |
| target | No | Optimization target | 60fps-desktop |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description bears full responsibility for disclosing behavioral traits. It only claims 'expert optimizations' and achieving 60fps but omits critical details: whether the tool modifies the input code destructively, the nature of optimizations applied, permissions required, or any limitations. This is a significant gap for a potentially mutative tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence, making it concise, but it lacks structure and is overly vague. Front-loading is adequate as it starts with the action, but the sentence is too brief to convey necessary detail.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (optimizing animation code) and the absence of an output schema or annotations, the description is insufficient. It does not explain return values, success criteria, error conditions, or scope of optimization. The 100% schema coverage partially compensates, but the description fails to provide a complete picture.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3. The description adds no extra meaning beyond the schema parameters. The param descriptions in the schema already explain 'GSAP animation code' and 'optimization target' with enums. The description's vague 'expert optimizations' does not enhance understanding of parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool optimizes animations for 60fps performance, but it uses the vague term 'any animation' while the input schema specifies GSAP animation code, creating a slight mismatch. The verb 'transform' and resource 'animation' are clear, and it distinguishes from siblings like 'debug_animation_issue' and 'create_production_pattern' by focusing on optimization.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives like 'debug_animation_issue' or when not to use it. The description lacks context about prerequisites, such as needing a valid GSAP animation, or scenarios where it might be inappropriate (e.g., for non-GSAP animations).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
The main AI engine - understands any animation request and generates perfect GSAP code with surgical precision
| Name | Required | Description | Default |
|---|---|---|---|
| request | Yes | Natural language description of the animation you want (e.g., "fade in cards one by one when scrolling", "create a hero entrance with staggered text") | |
| context | No | Development context and requirements | react |
| complexity | No | Animation complexity level | intermediate |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must fully disclose behavior. It only states it 'generates perfect GSAP code' but omits details like output format, side effects, prerequisites, or limitations (e.g., does it modify files? require authentication?). This is insufficient for a core tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence, which is concise but uses marketing language ('surgical precision') that adds no functional value. It is front-loaded with 'main AI engine,' but the fluff reduces efficiency.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (3 parameters with enums, no output schema, no annotations, and multiple siblings), the description is incomplete. It lacks details on return values, error handling, and when to prefer this over siblings like 'create_production_pattern' or 'debug_animation_issue.'
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% (all parameters have descriptions). The description adds no new meaning beyond 'understands any animation request,' which aligns with the 'request' parameter. Thus, it meets the baseline but does not enhance parameter understanding.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states that this tool 'understands any animation request and generates perfect GSAP code,' which identifies the verb and resource. It positions itself as the 'main AI engine,' distinguishing it from specialized siblings like 'debug_animation_issue' or 'optimize_for_performance.' However, it does not explicitly contrast with each sibling.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus its siblings. The claim 'any animation request' suggests it is the primary tool, but without exclusions or alternative recommendations, the agent lacks decision support.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.1.2create_production_patterndebug_animation_issuegenerate_complete_setupget_gsap_api_expertoptimize_for_performanceunderstand_and_create_animationScored across 6 tools
Each tool has a clear, unique purpose: pattern generation, debugging, setup, API reference, optimization, and animation creation. There is no overlap in functionality, making it easy for an agent to select the right tool.
Tool names use snake_case and are descriptive, but the verb structure varies (create, debug, generate, get, optimize, understand). The last tool uses two verbs, breaking the pattern. While readable, it lacks a strict convention.
Six tools cover the essential tasks for a GSAP expert assistant: setup, creation, patterns, debugging, optimization, and API info. No tools feel redundant or missing, making the count appropriate for the scope.
The tool set covers the main lifecycle of GSAP animation work: setup, creation, patterns, debugging, optimization, and reference. Minor gaps exist, such as no dedicated tool for editing existing animations or managing timelines, but the core workflows are complete.
Turn prompts into production-ready game assets: animated characters, textures, terrain, VFX, HUD.
Create consistent mascot assets and animations for products through AI agents.
Create AI animations and export transparent sprite sheets, alpha video, frames, and game assets.
AI-powered design and management for Webflow Sites
