gsap-mcp-server

Mojo-Solo/gsap-mcp-server

3.2

If you are the rightful owner of gsap-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The GSAP MCP Server is a Model Context Protocol server that provides tools for creating, analyzing, and optimizing web animations using the GreenSock Animation Platform (GSAP).

Tools

  1. gsap_timeline

    Create GSAP timelines with multiple animations.

  2. gsap_tween

    Generate individual GSAP animations.

  3. gsap_easing

    Get easing functions and preview code.

  4. gsap_preset

    Access common animation presets.

  5. gsap_analyze

    Analyze GSAP code for optimization.

GSAP MCP Server

An MCP (Model Context Protocol) server that provides GSAP (GreenSock Animation Platform) tools for creating, analyzing, and optimizing web animations. Now includes ALL GSAP plugins (free as of 2024).

Features

Core Animation Tools

  • Timeline Creation: Build complex animation timelines with multiple tweens
  • Tween Generation: Create to, from, fromTo, and set animations
  • Easing Functions: Access all GSAP easing functions with examples
  • Animation Presets: Ready-to-use animation patterns (fade, slide, scale, etc.)
  • Animation Controls: Generate play, pause, reverse, and seek controls

Plugin Tools

  • ScrollTrigger: Create scroll-based animations with the most popular GSAP plugin
  • SplitText: Animate text by characters, words, or lines
  • MorphSVG: Morph between SVG shapes and paths
  • DrawSVG: Animate SVG strokes and line drawings
  • MotionPath: Animate elements along SVG paths
  • Flip: Create smooth layout animations and transitions
  • TextPlugin: Type and scramble text animations

Development Tools

  • Code Analysis: Analyze animation code for performance and best practices
  • Debug Tools: Timeline visualization and inspection
  • Performance Profiler: Monitor FPS, memory, and optimization suggestions
  • Framework Integration: Generate code for React, Vue, Angular, and Svelte

Utility Features

  • Utility Methods: Use interpolate, mapRange, clamp, and other GSAP utilities
  • MatchMedia: Build responsive animations that adapt to screen sizes

Installation

npm install
npm run build

Usage

Add to your MCP client configuration:

{
  "mcpServers": {
    "gsap": {
      "command": "node",
      "args": ["path/to/gsap-mcp/dist/index.js"]
    }
  }
}

Available Tools

gsap_timeline

Create GSAP timelines with multiple animations.

{
  "animations": [
    {
      "target": ".element",
      "duration": 1,
      "properties": { "x": 100, "opacity": 1 },
      "position": "+=0.5"
    }
  ],
  "settings": {
    "repeat": -1,
    "yoyo": true
  }
}

gsap_tween

Generate individual GSAP animations.

{
  "method": "to",
  "target": ".box",
  "duration": 2,
  "properties": { "rotation": 360, "scale": 1.5 },
  "options": {
    "ease": "power2.inOut",
    "repeat": 3
  }
}

gsap_easing

Get easing functions and preview code.

{
  "category": "elastic",
  "preview": true
}

gsap_preset

Access common animation presets.

{
  "type": "fadeIn",
  "options": {
    "duration": 1.5,
    "ease": "power3.out"
  }
}

gsap_analyze

Analyze GSAP code for optimization.

{
  "code": "gsap.to('.element', { x: 100, duration: 1 })",
  "checkPerformance": true,
  "suggestOptimizations": true
}

gsap_scrolltrigger

Create scroll-based animations.

{
  "animation": {
    "target": ".parallax",
    "properties": { "yPercent": -50 }
  },
  "trigger": {
    "trigger": ".section",
    "start": "top bottom",
    "end": "bottom top",
    "scrub": true
  }
}

gsap_splittext

Split and animate text.

{
  "target": ".headline",
  "type": "chars,words",
  "animation": {
    "method": "from",
    "properties": { "opacity": 0, "y": 20 },
    "stagger": 0.02
  }
}

gsap_utilities

Access GSAP utility methods.

{
  "method": "mapRange",
  "params": {
    "inMin": 0, "inMax": 100,
    "outMin": 0, "outMax": 1,
    "value": 50
  }
}

gsap_matchmedia

Create responsive animations.

{
  "breakpoints": [
    {
      "name": "mobile",
      "query": "(max-width: 768px)",
      "animations": [
        {
          "target": ".hero",
          "properties": { "scale": 0.8 }
        }
      ]
    }
  ]
}

gsap_controls

Generate animation controls.

{
  "action": "play",
  "target": "timeline",
  "selector": "mainTimeline"
}

gsap_morphsvg

Create SVG path morphing animations.

{
  "target": "#startShape",
  "endShape": "#endShape",
  "duration": 2,
  "options": {
    "shapeIndex": "auto",
    "type": "rotational"
  }
}

gsap_drawsvg

Animate SVG stroke drawings.

{
  "target": ".path",
  "from": "0%",
  "to": "100%",
  "duration": 2,
  "options": {
    "ease": "power2.inOut",
    "stagger": 0.1
  }
}

gsap_motionpath

Animate elements along paths.

{
  "target": ".element",
  "path": "#myPath",
  "duration": 5,
  "options": {
    "autoRotate": true,
    "align": "#myPath"
  }
}

gsap_flip

Create state-based layout animations.

{
  "targets": ".grid-item",
  "action": "state",
  "options": {
    "duration": 0.7,
    "scale": true,
    "absolute": true
  }
}

gsap_textplugin

Create text content animations.

{
  "target": ".text",
  "text": "Hello World!",
  "duration": 2,
  "type": "scramble",
  "options": {
    "scrambleText": {
      "chars": "XO#$%-+=?",
      "revealDelay": 0.5
    }
  }
}

gsap_debug

Debug and visualize animations.

{
  "action": "visualize",
  "target": "myTimeline",
  "options": {
    "showMarkers": true,
    "logDetails": true
  }
}

gsap_performance

Analyze and optimize performance.

{
  "action": "analyze",
  "code": "gsap.to('.heavy', { boxShadow: '0 0 20px red' })",
  "options": {
    "metrics": ["fps", "memory"]
  }
}

gsap_framework_integration

Generate framework-specific code.

{
  "framework": "react",
  "type": "hook",
  "options": {
    "typescript": true,
    "cleanup": true
  }
}

Development

npm run dev    # Run in development mode
npm run build  # Build for production
npm test       # Run tests

License

MIT