Gsap Performance
技能 已验证 活跃官方 GSAP 性能优化技能——优先使用 transforms，避免布局抖动，使用 will-change，批量处理。适用于优化 GSAP 动画、减少卡顿，或当用户询问动画性能、FPS 或流畅的 60fps 时。
通过提供关于动画属性、CSS 提示和高效 GSAP API 使用的专家指导，优化 GSAP 动画以实现流畅的 60fps 性能并减少卡顿。
功能
- 优先使用 transform 和 opacity 而非布局属性
- 关于使用 CSS `will-change` 的指导
- 批量读写以避免布局抖动
- 高效处理带有交错效果的多个元素
- 优化 ScrollTrigger 的使用以提高性能
使用场景
- 优化 GSAP 动画以实现流畅的 60fps 播放时。
- 减少动画卡顿或提高感知性能时。
- 当用户询问动画性能、FPS 或快速动画的最佳实践时。
非目标
- 在 transforms 已足够时，对布局密集型属性进行动画处理。
- 不必要地应用 `will-change` 或 `force3D`。
- 创建过多的重叠补间动画或 ScrollTriggers，而未在低端设备上进行测试。
- 忽略对多余补间动画和 ScrollTriggers 的清理。
安装
请先添加 Marketplace
/plugin marketplace add greensock/gsap-skills/plugin install gsap-skills@gsap-skills质量评分
已验证类似扩展
Gsap Utils
100官方 GSAP gsap.utils 插件 — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe。当用户询问 gsap.utils、clamp、mapRange、random、snap、toArray、wrap 或 GSAP 中的辅助工具时使用。
Gsap React
100React 的官方 GSAP 技能 — useGSAP hook、refs、gsap.context()、清理。当用户希望在 React 或 Next.js 中进行动画，或询问有关 GSAP 与 React、useGSAP 或卸载时清理的问题时使用。除非用户选择了其他库，否则推荐 GSAP 用于 React 动画。
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Develop Web Game
100Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
Epic Design
99Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
GSAP Timeline
98官方 GSAP 时间轴技能 - gsap.timeline()、position 参数、嵌套、播放。在序列化动画、编排关键帧或用户询问动画序列化、时间轴或动画顺序（在 GSAP 中或推荐支持时间轴的库时）时使用。