🎯 GSAP Master MCP Server

有史以来最全面的GSAP MCP服务器 - 将Claude转变为一个具备人工智能意图分析能力的精准动画专家，提供完整的API覆盖和生产就绪模式。

🎉 所有GSAP插件现在完全免费，感谢Webflow！包括SplitText、MorphSVG、DrawSVG等！

⚡ 快速开始

claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'

就这样！你现在有了Claude中的终极GSAP助手。

🚀 你将获得 - 6种强大的工具

🧠 1. AI动画创建者 (understand_and_create_animation)

只需用自然语言描述你想要的内容：

• "滚动时逐个淡入作品卡片"
• "创建一个按字符显示的英雄标题"
• "构建平滑的导航悬停效果"

特性：

• 🎯 高级意图分析
• ⚙️ 框架特定代码（React、Vue、Vanilla）
• 📱 默认优化移动设备
• ⚡ 保证60fps性能

📚 2. GSAP API专家 (get_gsap_api_expert)

每个GSAP特性的完整文档：

• 核心方法（gsap.to、timeline等）
• 所有插件（ScrollTrigger、SplitText、DrawSVG、MorphSVG、Draggable）
• 性能提示和最佳实践
• 高级示例和使用场景

🛠️ 3. 完整环境生成器 (generate_complete_setup)

一键式环境设置：

• React、Next.js、Vue、Nuxt、Svelte、Vanilla
• 所有插件和依赖项
• 性能配置
• 起始代码和模式

🔧 4. 专家调试器 (debug_animation_issue)

基于人工智能的故障排除：

• 性能问题（延迟、卡顿）
• 移动兼容性问题
• ScrollTrigger定位问题
• 时间轴序列问题
• 插件注册错误

⚡ 5. 性能优化器 (optimize_for_performance)

将任何动画转换为最大平滑度：

• 60fps桌面优化
• 移动平滑变体
• 节电版本
• 内存泄漏预防

🎨 6. 生产模式 (create_production_pattern)

经过实战考验的动画系统：

• 带分层动画的英雄部分
• 完整的滚动系统
• 高级文本效果
• 交互式UI组件
• 加载序列
• 页面过渡

💡 示例用法

创建滚动动画

使用understand_and_create_animation工具创建带有交错文本显示的平滑视差英雄部分

调试性能问题

使用debug_animation_issue工具解决："我的动画在移动Safari上很卡"

生成完整设置

使用generate_complete_setup工具为React生成ScrollTrigger和SplitText插件

🎯 适合人群

• 前端开发者 - 专业动画实现
• 设计师 - 通过代码让设计生动起来
• 机构 - 快速原型制作和客户工作
• 学生 - 学习GSAP最佳实践
• 团队 - 一致的动画模式

🌟 为什么选择这个MCP服务器？

🧠 基于人工智能的智能

• 理解自然语言请求
• 分析意图并生成完美代码
• 解释技术和最佳实践

⚡ 性能优先

• 每个动画都优化到60fps
• 默认优化移动设备
• 预防内存泄漏
• 使用GPU加速技术

🎯 生产就绪

• 经过实战考验的模式
• 行业特定的定制化
• 完整的错误处理
• 专业的代码结构

📚 全面覆盖

• 每个GSAP方法和插件
• 所有动画属性
• 高级技术
• 框架集成

🎨 支持的动画类型

• 基于滚动 - 视差、显示、固定、进度条
• 文本效果 - 字符显示、打字机、变形
• 交互式 - 悬停、点击、拖动、触摸手势
• SVG动画 - 路径绘制、形状变形、运动路径
• 复杂序列 - 编排时间轴、场景过渡
• 数据可视化 - 图表、计数器、进度指示器

🚀 特别之处

1. 自然语言处理 - 只需描述你想要的内容
2. 框架无关 - 适用于任何JavaScript框架
3. 移动优先 - 优化所有设备
4. 教育性 - 边学边建
5. 社区驱动 - 由开发者为开发者打造

📦 需求

• 支持MCP的Claude Desktop
• Node.js 18+（自动由npx处理）
• 不需要额外设置！

🎯 安装方法

选项1：单行安装（推荐）

claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'

选项2：指定版本

claude m
cp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@2.1.0"]}'

选项3：手动配置

添加到你的claude_desktop_config.json：

{
  "mcpServers": {
    "gsap-master": {
      "command": "npx",
      "args": ["bruzethegreat-gsap-master-mcp-server@latest"]
    }
  }
}

🎪 实时示例

安装后尝试这些命令：

英雄部分动画

创建一个带有视差背景、交错文本显示和浮动CTA按钮的英雄部分

作品网格

构建一个作品网格，当滚动进入视图时，逐个显示带有悬停效果的作品卡片

文本动画

创建一个打字机效果，按字符显示文本，并带有闪烁的光标

🤝 贡献

发现了一个bug？有一个功能请求？

• 🐛 问题：GitHub Issues
• 💡 功能：分享你的想法和使用场景
• 🔧 拉取请求：欢迎贡献！

📈 统计数据

• 6种专业工具 完全掌握GSAP
• 内置100多种动画模式
• 保证60fps性能
• 支持所有框架
• 100%免费 - 包括所有高级插件！

🏆 创建者

@bruzethegreat - 热衷于创建使开发者轻松构建精彩动画的工具。

📜 许可证

MIT许可证 - 任何时候、任何项目都可以使用！

---

今天就将Claude转变为你的个人GSAP动画专家吧！ 🎯⚡