Gsap Web
iart-ai/web-animation-skills/skills/gsap-web作者 iart-aib6dba3eb7597无许可证34 个星标收录于 2026年10月9日更新于 2026年10月8日仓库3个月前更新
This skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollTrigger pins break with Lenis/Locomotive", or "set up smooth scroll with GSAP pinning". Covers GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis/Locomotive smooth-scroll sync for code-driven web motion.
仅公开文件列表。将技能安装到工作区后即可查看文件内容。
| 路径 | 大小 | 类型 |
|---|---|---|
| examples/hero-timeline.js | 2.5 KB | text/plain |
| examples/standalone-template.html | 2.7 KB | text/plain |
| README.md | 0 B | text/markdown |
| references/scrolltrigger-cookbook.md | 5.5 KB | text/markdown |
| references/scrolltrigger-lenis.md | 10.3 KB | text/markdown |
| SKILL.md | 12.1 KB | text/markdown |
来源与署名
来源：iart-ai/web-animation-skills位于skills/gsap-web提交b6dba3e
许可证： 无许可证
内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。
更多来自 iart-ai/web-animation-skills 的技能
Svg Animation
iart-ai
指导使用 CSS、SMIL 或 GSAP 制作 SVG 动画，产出带定位工具的独立 HTML 文件。
Page Transition Animation
iart-ai
在 Next.js App Router 中实现和调试页面进入/退出过渡动画，可使用 Framer Motion 或 View Transitions API。
Micro Interaction
iart-ai
指导使用 Framer Motion 与现代 CSS 构建小型 UI 微交互，并交付独立的 HTML 演示。
Lottie Animation
iart-ai
集成、控制、换肤并导出用于 Web、iOS、Android 和 React Native 的 Lottie 矢量动画。
Glassmorphism
iart-ai
用独立 HTML 构建磨砂与液态玻璃拟态界面效果，包含 CSS 模糊、边缘高光、动效与无障碍回退。
Ascii Animation
iart-ai
将生成场、图像、视频、3D 场景或终端帧渲染为动态 ASCII 字符画。
更多Software Development技能
Playground
anthropics
构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。
M5 Onboard
anthropics
通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。
Cardputer Buddy
anthropics
指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。
Web Design Guidelines
vercel-labs
依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。
Vercel React Native Skills
vercel-labs
React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。
Vercel React Best Practices
vercel-labs
Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。