MCP 服务器

GSAP MCP Server

Enables Claude Code to create and manage GSAP animations, including timelines, scroll triggers, and performance optimization.

README

GSAP MCP Server

A comprehensive GSAP animation MCP server for Claude Code integration, providing seamless access to all GSAP features through the Model Context Protocol.

Features

Core Animation Tools

gsap-animate: Create animations using gsap.to(), gsap.from(), and gsap.fromTo()
gsap-set: Instantly set CSS properties without animation
gsap-timeline: Create and manage complex animation sequences
gsap-kill-tweens: Stop and control running animations

Plugin Integration

gsap-scroll-trigger: Scroll-based animations with ScrollTrigger
gsap-motion-path: Animate elements along custom paths
gsap-draggable: Create interactive draggable elements
gsap-morph-svg: SVG shape morphing (premium plugin)
gsap-split-text: Advanced text animations (premium plugin)

Effect Libraries

gsap-page-transition: Smooth page transitions
gsap-parallax: Parallax scrolling effects
gsap-stagger: Advanced staggered animations

Utility Tools

gsap-selector: Smart element selection and validation
gsap-easing: Explore and create custom easing functions
gsap-performance: Monitor and optimize animation performance

Resource Management

Animation presets and templates
GSAP API documentation
Code examples and tutorials
Performance optimization guides

Installation

npm install gsap-mcp-server

Usage with Claude Code

Add the server to your Claude Code configuration:

claude mcp add gsap-server /path/to/gsap-mcp-server

Or add to your settings.json:

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

Start using GSAP tools in Claude Code:

Use the gsap-animate tool to create a fade-in animation for .hero-title

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

# Run tests
npm test

# Lint code
npm run lint

API Reference

Basic Animation

// Generated code example
import { gsap } from 'gsap';

gsap.to('.element', {
  x: 100,
  opacity: 1,
  duration: 1,
  ease: 'power2.out'
});

Timeline Animation

// Generated code example
const tl = gsap.timeline();
tl.to('.box1', { x: 100, duration: 1 })
  .to('.box2', { y: 100, duration: 1 }, '-=0.5');

ScrollTrigger Integration

// Generated code example
gsap.to('.parallax', {
  y: -100,
  ease: 'none',
  scrollTrigger: {
    trigger: '.container',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true
  }
});