AI导哈

GSAP动画生成工具

一个全面的GSAP动画生成工具，提供AI驱动的意图分析、完整的API覆盖和生产就绪的动画模式，帮助开发者快速创建高性能动画。

  • by bruzethegreat
  • JavaScript
  • 本地部署
  • 123 星标
  • 更新于
在 GitHub 查看 bruzethegreat/gsap-master-mcp-server

使用说明

🎯 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动画 -路径绘制、形状变形、运动路径
  • 复序列 -精心编排的时间线、场景过渡
  • 数据可视化 -图表、计数器、进度指示器

🚀 是什么让它与众不同

  1. 自然语言处理 -描述一下你想要什么
  2. 框架不可知 -适用于任何JavaScript框架
  3. 移动优先 -针对所有设备进行了优化
  4. 教育的 -在构建的同时学习
  5. 社区驱动 -由开发者为开发者打造

📦 需求

  • 支持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了吗？有功能请求吗？

  • 🐛 问题: GitHub问题
  • 💡 特性：分享你的想法和用例
  • 🔧 拉取请求：欢迎投稿！

📈 统计

  • 6专业工具 全面掌握GSAP
  • 100+动画图案 内置的
  • 60fps性能 保证
  • 所有框架 支持
  • 100%免费 -包括所有高级插件！

🏆 由...创建

@布鲁泽特伟大 -热衷于创建工具，使开发人员能够轻松构建令人惊叹的动画。

📜 许可证

MIT许可证-随时随地为任何项目使用它！

立即将Claude转变为您的GSAP动画专家！ 🎯⚡

相关 MCP