gsap-showcase

GSAP 展示案例 — 高级动画参考

配套内容：如需了解 GSAP 各插件的 API，请调用相关的官方技能 （gsap-core、gsap-plugins、gsap-timeline、gsap-scrolltrigger 等）。 本技能仅涵盖完整组合效果。

---

使用方法

本技能是双层方案体系中的审美层：

• 第 1 层 — 构建模块：各项独立技术技能（gsap-scroll、 gsap-text、gsap-cursor、gsap-vfx 等）提供可单独使用、可直接复制粘贴的模式。
• 第 2 层 — 展示案例（本技能）：结合多个插件打造精致、可用于生产环境的完整高级动画组合。

高级动画工作流：

1. 查看展示案例，寻找与需求类似的组合效果。
2. 研究其编排方式——插件组合、时序、分层和响应式处理。
3. 使用技术技能实现各个组件（通过 gsap-scroll 实现滚动触发，通过 gsap-text 实现文本显示效果，通过 gsap-interact 实现交互等）。

展示案例提供做什么和为什么；技术技能提供怎么做。

---

类别

类别	内容	示例
hero-sections	首屏主视觉组合效果	文本显示效果 + 滚动 + 响应式
scroll-experiences	沉浸式滚动驱动画面	3D 轮播、固定序列
interactive-scenes	复杂的交互式组合效果	多插件展示案例
page-transitions	整页过渡效果	页面间动画
loading-sequences	高级加载／显示效果	分阶段加载动画

---

展示案例条目格式

references/<category>/ 中的每个参考文件都包含：

部分	内容
来源	原始 CodePen 链接和作者署名
使用的插件	所需的 GSAP 插件（ScrollTrigger、SplitText 等）
高级质感的关键	设计上的关键品质——时序、分层、润色
编排说明	插件组合方式、序列编排策略、响应式方案
完整代码	完整的 HTML + CSS + JS（可用于生产环境的参考代码）
适配说明	如何针对不同内容、框架、断点进行修改

---

可用的展示案例

展示案例	类别	插件	参考文件
响应式 SplitText 动画器	hero-sections	SplitText、GSDevTools	responsive-splittext-animator
响应式 matchMedia	hero-sections	gsap.matchMedia()	responsive-matchmedia
滚动控制的纵向名片轮播	scroll-experiences	ScrollTrigger	scrubbed-rolodex
Free For All（旗舰案例）	interactive-scenes	SplitText、Physics2D、MotionPath、DrawSVG、CustomBounce、CustomWiggle	free-for-all
复杂 SVG 时间线	interactive-scenes	时间线标签、SVG 属性、GSDevTools	complex-svg-timeline
滚动控制的 Bento 画廊	scroll-experiences	ScrollTrigger、Flip	scrubbed-bento-gallery
卡片堆叠	scroll-experiences	Flip	card-stack
曲线滑动	scroll-experiences	MorphSVG	curve-swipe
图像序列	scroll-experiences	ScrollTrigger	image-sequence
无限卡片滑块	scroll-experiences	ScrollTrigger、Draggable	infinite-card-slider

---

Category References

• references/hero-sections/ — Above-fold hero compositions (2 showcases)
• references/scroll-experiences/ — Immersive scroll scenes (6 showcases)
• references/interactive-scenes/ — Multi-plugin interactive compositions (2 showcases)
• references/page-transitions/ — Full-page transitions (planned)
• references/loading-sequences/ — Premium loading animations (planned)