🎯 GSAP主MCP服务器
有史以来最全面的GSAP MCP服务器 -将Claude转变为外科精准动画专家，拥有AI驱动的意图分析、完整的API覆盖范围和生产就绪模式。
🎉 所有GSAP插件现在100%免费 感谢Webflow！包括SplitText、MorphSVG、DrawSVG等！
⚡ 快速开始
claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'就是这样！你现在有了克劳德的终极GSAP助理。
🚀 你得到了什么-6个强大的工具
🧠 1.AI动画创作者 (understand_and_create_animation)
用自然语言描述你想要什么：
- *“滚动时，投资组合卡逐一淡出”*
- *“创建一个逐个角色显示角色的英雄头衔”*
- *“为导航构建平滑的悬停效果”*
特征：
- 🎯 高级意图分析
- ⚙️ 框架特定代码（React、Vue、Vanilla）
- 📱 默认情况下移动优化
- ⚡ 60fps性能保证
📚 2.GSAP API专家 (get_gsap_api_expert)
每个GSAP功能的完整文档：
- 核心方法（gsap.to、时间表等）
- 所有插件（ScrollTrigger、SplitText、DrawSVG、MorphSVG、可拖动）
- 性能提示和最佳实践
- 高级示例和用例
🛠️ 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组件
- 加载顺序
- 页面转换
💡 示例用法
创建滚动动画
Use the understand_and_create_animation tool to create a smooth parallax hero section with staggered text reveals调试性能问题
Use the debug_animation_issue tool with: "My animations are laggy on mobile Safari"生成完整设置
Use the generate_complete_setup tool for React with ScrollTrigger and SplitText plugins🎯 非常适合
- 前端开发人员 -专业动画制作
- 设计师 -用代码将设计变为现实
- 机构 -快速原型制作和客户工作
- 学生 -学习GSAP最佳实践
- 团队 -一致的动画模式
🌟 为什么选择MCP服务器？
🧠 人工智能驱动的智能
- 理解自然语言请求
- 分析意图并生成完美的代码
- 解释技术和最佳实践
⚡ 性能优先
- 每个动画都针对60fps进行了优化
- 默认情况下移动响应
- 内存泄漏预防
- GPU加速技术
🎯 生产准备就绪
- 久经考验的模式
- 行业特定定制
- 完整的错误处理
- 专业代码结构
📚 全面覆盖
- 每个GSAP方法和插件
- 所有动画属性
- 先进技术
- 框架集成
🎨 支持的动画类型
- 基于滚动 -视差、显示、图钉、进度条
- 文字特效 -字符显示、打字机、变形
- 交互式 -悬停、单击、拖动、触摸手势
- SVG动画 -路径绘制、形状变形、运动路径
- 复序列 -精心编排的时间线、场景过渡
- 数据可视化 -图表、计数器、进度指示器
🚀 是什么让它与众不同
- 自然语言处理 -描述一下你想要什么
- 框架不可知 -适用于任何JavaScript框架
- 移动优先 -针对所有设备进行了优化
- 教育的 -在构建的同时学习
- 社区驱动 -由开发者为开发者打造
📦 需求
- 支持MCP的Claude桌面
- Node.js 18+（由npx自动处理）
- 无需额外设置！
🎯 安装方法
选项1：单线安装（推荐）
claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'选项2：特定版本
claude mcp 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"]
}
}
}🎪 现场实例
安装后尝试以下命令：
英雄部分动画
Create a hero section with parallax background, staggered text reveals, and floating CTA button投资组合网格
Build a portfolio grid that reveals cards one by one with hover effects when scrolling into view文本动画
Create a typewriter effect that reveals text character by character with a blinking cursor🤝 贡献
发现bug了吗？有功能请求吗？
- 🐛 问题:
- 💡 特性：分享你的想法和用例
- 🔧 拉取请求：欢迎投稿！
📈 统计
- 6专业工具 全面掌握GSAP
- 100+动画图案 内置的
- 60fps性能 保证
- 所有框架 支持
- 100%免费 -包括所有高级插件！
🏆 由...创建
@布鲁泽特伟大 -热衷于创建工具，使开发人员能够轻松构建令人惊叹的动画。
📜 许可证
MIT许可证-随时随地为任何项目使用它！
______________________________________________________________________
立即将Claude转变为您的GSAP动画专家！ 🎯⚡
](https://www.npmjs.com/package/bruzethegreat-gsap-master-mcp-server) ](https://www.npmjs.com/package/bruzethegreat-gsap-master-mcp-server)