gsap mcp
MCP服务器用于生成GSAP动画代码——无运行时依赖性，纯静态代码生成。
安装
npm install
npm run build配置
添加到您的Claude桌面配置(~/.claude/claude_desktop_config.json):
{
"mcpServers": {
"gsap": {
"command": "node",
"args": ["/absolute/path/to/gsap-mcp/dist/index.js"]
}
}
}工具（18）
核心（4）
| 工具 | 描述 | 示例输入 |
|---|---|---|
gsap_tween | 生成gsap.to/from/fromTo tween | { "target": ".box", "method": "to", "properties": { "opacity": 1, "x": 100 } } |
gsap_timeline | 构建多步骤GSAP时间表 | { "steps": [{ "target": ".a", "method": "to", "properties": { "x": 100 } }] } |
gsap_easing | 查找并预览GSAP缓解功能 | { "action": "lookup", "ease": "power2.out" } |
gsap_preset | 生成常见的动画预设（fadeIn、slideUp等） | { "preset": "fadeIn", "target": ".hero" } |
插件（7）
| 工具 | 描述 | 示例输入 |
|---|---|---|
gsap_scrolltrigger | ScrollTrigger驱动的滚动动画 | { "target": ".section", "mode": "standalone", "trigger": ".section" } |
gsap_splittext | 分割文本字符/单词/行动画 | { "target": ".heading", "splitType": "chars", "animation": "from" } |
gsap_morphsvg | 使用MorphSVGPlugin进行SVG形状变形 | { "target": "#shape1", "shape": "#shape2" } |
gsap_drawsvg | SVG笔划绘制动画 | { "target": ".path", "from": "0%", "to": "100%" } |
gsap_motionpath | 沿运动路径设置元素动画 | { "target": ".dot", "path": "#circuit" } |
gsap_flip | FLIP动画状态转换 | { "targets": ".cards", "action": "full" } |
gsap_textplugin | 文本替换和混乱效果 | { "target": ".text", "text": "Hello!", "type": "replace" } |
开发人员（7）
| 工具 | 描述 | 示例输入 |
|---|---|---|
gsap_analyze | 性能、最佳实践、可访问性的静态分析 | { "code": "gsap.to('.box', { width: 100 })" } |
gsap_controls | 播放/暂停/反转/寻道控制代码 | { "action": "play", "target": "timeline" } |
gsap_utilities | GSAP实用方法（夹具、贴图范围、捕捉等） | { "method": "clamp", "params": { "min": 0, "max": 100, "value": 150 } } |
gsap_matchmedia | 使用gsap.matchMedia（）的响应式动画 | { "breakpoints": [{ "name": "Mobile", "query": "(max-width: 768px)", "animations": [] }] } |
gsap_debug | 调试工具：标记、GSDevTools、日志记录、慢动作 | { "action": "slowmo", "options": { "timeScale": 0.25 } } |
gsap_performance | FPS监控、代码优化、帧分析 | { "action": "monitor", "options": { "metrics": ["fps"] } } |
gsap_framework_integration | React/Vue/Angular/Svelte的框架特定代码 | { "framework": "react", "type": "hook" } |
建筑
gsap-mcp/
├── src/
│ ├── index.ts # Entry point — registers all 18 tools
│ ├── generators/
│ │ ├── code-builder.ts # Fluent builder for imports + body assembly
│ │ └── templates.ts # formatGsapVars, formatPosition, wrapInFunction
│ ├── knowledge/
│ │ ├── easings.ts # Easing function database
│ │ ├── properties.ts # CSS/GSAP property mappings + performance data
│ │ └── best-practices.ts # Optimization rules, performance tips, pitfalls
│ └── tools/
│ ├── core/ # Tween, timeline, easing, presets
│ ├── plugins/ # ScrollTrigger, SplitText, MorphSVG, etc.
│ └── dev/ # Analyze, controls, utilities, debug, etc.
├── tests/ # Mirrors src/ structure, 23 test files
├── dist/ # Built output (tsc)
├── package.json
└── tsconfig.json关键设计决策：
- 无GSAP运行时依赖关系 --服务器使用静态知识库和模板构建器生成代码字符串。它从不自行导入或执行GSAP。
- 可测试的核心功能 --每个工具都导出一个
generateXxxCode(params)无需MCP基础设施即可直接测试的功能。 - MCP SDK模式 --每个工具导出一个
registerXxxTool(server)调用的函数server.registerTool()使用Zod v4输入模式。 - 代码生成器 --流畅的构建器，管理导入、插件注册和正文行，然后用
build()（完整）或buildSnippet()（仅限身体）。
发展
# Run all tests
npx vitest run
# Watch mode
npx vitest
# Type-check
npx tsc --noEmit
# Build
npx tsc
# Dev mode (tsx)
npx tsx src/index.ts添加新工具
- 创建
src/tools//.ts - 出口
generateXxxCode(params): XxxResult（可测试的核心逻辑） - 出口
registerXxxTool(server: McpServer)（MCP注册） - 添加导入+注册调用
src/index.ts - 创建
tests/tools/.test.ts - 跑
npx tsc --noEmit && npx vitest run
许可证
麻省理工学院