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

1. Add the server to your Claude Code configuration:

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

2. Or add to your settings.json:

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

3. 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
  }
});

Performance Optimization

The server includes built-in performance monitoring and optimization suggestions:

• GPU acceleration recommendations
• Memory usage tracking
• Frame rate monitoring
• Animation complexity analysis

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

Support

For support and questions:

• Check the documentation
• Open an issue on GitHub
• Visit the GSAP community forums

🎯 Generated with Claude Code - Bringing GSAP animations to your development workflow with intelligent assistance.