# 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

```bash
npm install gsap-mcp-server
```

## Usage with Claude Code

1. Add the server to your Claude Code configuration:

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

2. Or add to your `settings.json`:

```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

```bash
# 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

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

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

### Timeline Animation

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

### ScrollTrigger Integration

```javascript
// 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.