Javascript 如何在滚动时平滑地擦洗视频？

我在页面上使用scrollmagic和gsap滚动浏览视频，有点像本页面上的苹果：

不确定他们是否也使用视频，但这和我试图达到的效果是一样的

无论如何，我的脚本在Macbook/Safari上运行得很好，但Macbook/Chrome有点结巴，在PC上使用普通鼠标而不是触摸板更糟糕

是否有任何方法可以实现平滑的滚动体验，例如，如果有人用鼠标以“更大”的步长滚动视频，则会以某种方式使视频“赶上”

您可以在下面找到我迄今为止的代码：

const video=document.getElementById（'video'）；
const long=document.getElementById（'long'）；
设scrollpos=0；
让拉斯普斯；
const controller=new ScrollMagic.controller（）；
const scene=new ScrollMagic.scene({
触发元素：长，
触发钩：“合一者”
});
常量startScrollAnimation=（）=>{
场景
.addTo（控制器）
.持续时间（长时间）
.on（“进度”），（e）=>{
scrollpos=e.进度；
});
设置间隔（（）=>{
if（lastpos==scrollpos）返回；
requestAnimationFrame（（）=>{
video.currentTime=video.duration*scrollpos；
video.pause（）；
lastpos=滚动POS；
});
}, 50);
};
const preload video=（v，回调）=>{
常数就绪=（）=>{
v、 removeEventListener（'canplaythrough'，就绪）；
video.pause（）；
var i=setInterval（函数（）{
如果（v.readyState>3）{
间隔时间（i）；
video.currentTime=0；
回调（）；
}
}, 50);
};
v、 addEventListener（'canplaythrough'，ready，false）；
v、 play（）；
};
预加载视频（视频、StartScroll动画）；
startScrollAnimation（）
#视频{
位置：固定；
}
#长的{
高度：20000像素；
}

为什么要使用ScrollMagic？苹果网站使用的是图像精灵，而不是视频。顺便说一句，我使用scrollmagic是因为我想在滚动时固定视频——你链接的代码笔似乎在移动设备（iOS）上也不起作用。谢谢你的信息，扎克！CodePen是一个mvp，你可以修改它以在mobileI上工作。我会检查它的，谢谢！