gsap-scrolltrigger-storytelling

GSAP ScrollTrigger 叙事技巧

适用场景

• 使用 GSAP ScrollTrigger 构建电影感的粘性产品叙事、渐进式 UI 展示、滚动同步动画、平滑插值和沉浸式分区过渡。

工作流

范围

• 当页面需要呈现由滚动驱动的产品故事，而非静态营销布局时，使用此技巧。
• 使用 GSAP ScrollTrigger 作为主要编排层，用于粘性分区、渐进式界面展示、固定场景、滚动控制的时间轴以及沉浸式分区过渡。
• 保留真实的产品叙事和清晰的界面。动效应帮助用户理解内容，而不是用戏剧化效果遮盖基本信息。

体验目标

• 打造粘性产品叙事，让每个滚动片段都展示一种新的产品状态、功能层、数据视图、设备画面或工作流步骤。
• 使用滚动同步动画，让文案、UI 面板、截图、叠层和背景氛围作为一个精心编排的序列协同变化。
• 构建渐进式 UI 展示：绘制边框、淡入控件、滑入面板、数值递增、高亮区域，并在用户继续滚动时切换状态。
• 通过可控的节奏、整洁的画面布局、层次感和恰到好处的过渡，营造电影感、高级感和沉浸感。

实现指南

• 使用带有 ScrollTrigger scrub 的 GSAP 时间轴编排主要滚动叙事；仅使用常规补间处理辅助的入场或悬停动效。
• 使用 pin: true 固定长篇叙事分区，并为每个场景设置明确的时间轴标签，以便轻松调整序列。
• 优先使用变换和不透明度动画，避免使用会影响布局的属性。仅在确实需要的动画元素上谨慎使用 will-change。
• 在 React 组件中使用 gsap.context()，并在组件卸载时清理，以正确销毁 ScrollTrigger。
• 如果图片、字体或异步内容会影响分区高度或固定偏移量，请在这些资源加载后刷新 ScrollTrigger。
• 使用 matchMedia() 或等效断点，让桌面端的粘性编排在较小屏幕上也能优雅地简化。

动效模式

• 粘性产品画面：固定主要内容，同时让周围的叙事按适当节奏更新。
• 分层展示：依次引入标签、叠层、面板和产品状态，使用短暂的偏移和统一的缓动风格。
• 分区衔接：让当前场景通过缩放、遮罩、模糊或平移过渡到下一个分区，而不是突然结束。
• 平滑插值：使用滚动平滑、quickSetter/quickTo 或线性插值后的值，处理指针跟随和滚动响应细节。
• 电影感层次：使用前景与背景视差、轻微的镜头移动、暗化层、遮罩和焦点变化，同时确保内容清晰易读。

调整参数

• 固定时长：产品叙事内容密集时延长；场景仅包含一两个状态变化时缩短。
• 滚动平滑感：技术讲解场景使用直接滚动控制；产品影片风格场景则使用带缓动的滚动控制。
• 展示密度：复杂 UI 可增加更多细微展示；在需要文案承载重点的叙事分区中则应减少展示。
• 过渡强度：将高强度过渡保留给分区衔接，不要用于每次细微的内容变化。

避免

• 每次滚动时都触发与叙事节奏无关的动画。
• 使用粘性或固定分区长时间困住读者，或让页面显得故障。
• 在滚动控制的场景中动画化宽度、高度、顶部、左侧或其他严重影响布局的属性；能够通过变换实现时应优先使用变换。
• 让电影感效果降低文本对比度、遮挡 CTA，或模糊该分区旨在说明的产品 UI。
• 在组件卸载或路由变更后仍未清理 ScrollTrigger。