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.