gsap-scrolltrigger-storytelling

name	gsap-scrolltrigger-storytelling
description	用 GSAP ScrollTrigger 构建电影感的钉住式产品叙事，含渐进式 UI 显现、与滚动同步的动画、顺滑插值，以及沉浸式的区块转场。

GSAP ScrollTrigger Storytelling Skill

何时使用

• 用 GSAP ScrollTrigger 构建电影感的钉住式产品叙事，含渐进式 UI 显现、与滚动同步的动画、顺滑插值，以及沉浸式的区块转场。

工作流程

范围

• 当页面应显得像一个滚动驱动的产品故事而非静态营销布局时应用。
• 将 GSAP ScrollTrigger 用作主要的编排层，负责钉住区块、渐进式界面显现、被钉住的场景、刷新式时间线，以及区块之间的沉浸式转场。
• 保留真实的产品叙事与界面清晰度。运动应增强理解，而非用戏剧性效果掩盖基本内容。

体验目标

• 打造钉住式产品叙事，让每个滚动段落揭示一个新的产品状态、特性层、数据视图、设备框架或工作流步骤。
• 使用与滚动同步的动画，让文案、UI 面板、截图、叠层与背景氛围作为一段编排好的序列一起运动。
• 构建渐进式 UI 显现：绘入框架、淡入控件、滑入面板、数值递增、高亮区域，并随用户前进而切换状态。
• 让整体氛围保持电影感、高级与沉浸，通过受控的节奏、干净的舞台调度、纵深，以及显得刻意的转场。

实现指引

• 用带 ScrollTrigger scrub 的 GSAP 时间线承载主滚动叙事，普通补间仅用于辅助的入场或悬停运动。
• 用 pin: true 钉住长篇故事区块，并把每个场景映射到显式的时间线标签，使序列易于调节。
• 优先使用变换与不透明度动画，而非影响布局的属性。在确实需要的动画元素上克制地使用 will-change。
• 在 React 组件中使用 gsap.context() 并在卸载时清理，使 ScrollTrigger 被正确杀掉。
• 如果图片、字体或异步内容会影响区块高度或钉住偏移，在它们加载后刷新 ScrollTrigger。
• 使用 matchMedia() 或等价断点，使桌面端的钉住编排能在小屏上优雅简化。

运动模式

• 钉住产品框架：让主物件保持钉住，同时周围叙事分步更新。
• 分层显现：以短偏移与共享的缓动语言，逐一带入标签、叠层、面板与产品状态。
• 场景交接：让当前场景缩放、遮罩、模糊或平移进入下一区块，而非突兀结束。
• 顺滑插值：为跟随指针与响应滚动的细节使用 scrub 平滑、quickSetter/quickTo 或 lerp 插值。
• 电影感纵深：使用前景/背景视差、微妙的镜头移动、变暗图层、遮罩与焦点切换，同时不压过可读性。

调节旋钮

• 钉住时长：为密集的产品故事延长，当场景只有一两处状态变化时缩短。
• Scrub 手感：为精确的技术演示使用直接 scrub，为更电影感的产品片使用带缓动的 scrub。
• 显现密度：为复杂 UI 增加更多微显现，为需要文案担纲的叙事区块减少它们。
• 转场强度：把高冲击力的转场留给区块交接，而非每一处小的内容变化。

避免

• 在每个滚动刻度上触发无关动画，却没有清晰的故事节拍。
• 使用把读者困住太久或让页面显得坏掉的钉住区块。
• 当变换足以胜任时，在 scrub 场景中对 width、height、top、left 或重布局属性做动画。
• 让电影感效果降低文字对比、遮住 CTA，或遮蔽本区块本应解释的产品 UI。
• 在组件卸载或路由切换后仍让 ScrollTrigger 存活。