← 全部效果

滚动进度绑定动画

把动画的进度直接绑在滚动位置上：往下滚动画正着放，往回滚动画倒着放，停住时动画也停在对应进度——这就是 Scroll Driven 的核心手感。右侧进度轨实时反映滚动百分比。

实时 Demo

阶段一 · 触达

这块卡片的透明度、位移、缩放全部由滚动进度 --p 驱动，没有任何 time-based 动画。

阶段二 · 浮现

回滚时动画倒着播放：进度值是纯函数 f(scrollTop)，同一滚动位置永远同一画面。

阶段三 · 就位

进度走满后完全静止；继续滚动不影响已完成的项，只有进入视口的项继续驱动。

阶段四 · 尾流

每一项的进度 = 元素在视口中的相对位置，与页面总滚动量解耦，长列表也稳定。

↑ 在上面区域滚动 / 回滚试试，进度条会跟着走，动画可逆

调参台拖动滑杆实时改手感，提示词同步更新

效果拆解

进度即函数：动画进度 p 不是时间驱动，而是滚动位置的纯函数 p = clamp((viewportBottom - elTop - offset) / (range), 0, 1)。同一滚动位置永远渲染同一画面，所以回滚 = 倒放，停住 = 定格。
逐项映射：每个元素独立计算自己的进度（元素顶部进入视口底部为 0，元素顶部到达视口 offsetTop 位置为 1），列表里各项错落出现，长页面天然分段。
rAF 节流：scroll 事件只记 dirty 标记，真正写样式放 requestAnimationFrame 里，一帧最多算一次，滚动再快也不掉帧。
原生方案：现代浏览器可用 CSS animation-timeline: scroll() 零 JS 实现；需要兼容旧浏览器或做复杂映射（如本页调参台的 offset/range）时用 JS 方案。

AI 提示词

用现代前端技术实现滚动进度绑定动画（Scroll Driven）：列表内每个卡片动画的进度 p 绑定滚动位置——p = clamp((视口底部 - 元素顶部 - 起始偏移 ${v.offset}px) / (触发区间 ${v.range}px), 0, 1)，用 rAF 节流 scroll 事件后统一写 CSS 变量 --p。卡片按 --p 插值：透明度 0→1、translateY ${(1-v.slide)*28+8}px→0、scale .94→1、顶部进度条宽度 0→100%。要求滚动完全可逆（回滚倒放）、停住即定格，进度条侧轨同步显示全局滚动百分比。禁用 time-based transition，样式写入走 transform/opacity 避免重排。

参数可调：起始偏移 offset（多晚开始触发）、触发区间 range（多快走完）、位移幅度 slide（入场行程）。
注意：样式只写 transform/opacity 合成层属性；p 必须夹在 [0,1]；iOS 惯性滚动下 rAF 频率足够，勿用 scroll 事件里直接写样式。