如何用ScrollMagic实现视频动画：容器到顶部才启动视频

使用ScrollMagic制作苹果风格的视频背景滚动动画，视频容器位于页面较下方，但滚动到该容器时，视频已经开始播放。希望视频在容器到达触发点前保持暂停状态，当前实现代码如下：

const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");
//END SECTION
const section = document.querySelector("section");
const end = section.querySelector("h1");

//SCROLLMAGIC
const controller = new ScrollMagic.Controller();

//Scenes
let scene = new ScrollMagic.Scene({
  duration: 2520,
  triggerElement: intro,
  triggerHook: 0
})
  .addIndicators()
  .setPin(intro)
  .addTo(controller);

//Text Animation
const textAnim = gsap.fromTo(text, 3, { opacity: 1 }, { opacity: 0 });

let scene2 = new ScrollMagic.Scene({
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0
})
  .setTween(textAnim)
  .addTo(controller);

//Video Animation
let accelamount = 0.3;
let scrollpos = 0;
let delay = 0;

scene.on("update", e => {
  scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
  delay += (scrollpos * 4 - delay) * accelamount;
  //console.log(scrollpos, delay);

  video.currentTime = delay;
}, 40);
console.log(video);

你遗漏了两个关键逻辑：

• 未初始暂停视频：页面加载后视频默认会自动播放（若浏览器允许），需要强制初始暂停
• 未绑定场景激活状态：当前代码不管视频容器是否进入触发区域，都会持续更新视频进度

修改后的代码如下：

const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");
const section = document.querySelector("section");
const end = section.querySelector("h1");

// 初始暂停视频，确保页面加载后视频不自动播放
video.pause();

const controller = new ScrollMagic.Controller();

let scene = new ScrollMagic.Scene({
  duration: 2520,
  triggerElement: intro,
  triggerHook: 0
})
  .addIndicators()
  .setPin(intro)
  .addTo(controller);

const textAnim = gsap.fromTo(text, 3, { opacity: 1 }, { opacity: 0 });

let scene2 = new ScrollMagic.Scene({
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0
})
  .setTween(textAnim)
  .addTo(controller);

let accelamount = 0.3;
let scrollpos = 0;
let delay = 0;
let isSceneActive = false;

// 监听场景进入/离开事件，控制视频播放状态
scene.on("enter", () => {
  isSceneActive = true;
  video.play();
});

scene.on("leave", () => {
  isSceneActive = false;
  video.pause();
});

scene.on("update", e => {
  scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
  // 仅当场景激活时，才更新视频播放进度
  if (isSceneActive) {
    delay += (scrollpos * 4 - delay) * accelamount;
    video.currentTime = delay;
  }
}, 40);

核心修改说明：

1. 页面加载时立即执行video.pause()，强制视频初始处于暂停状态
2. 新增isSceneActive变量，通过ScrollMagic的enter/leave事件标记场景是否激活
3. 在定时器中加入状态判断，仅当视频容器进入触发区域时，才更新视频播放进度并播放视频

内容的提问来源于stack exchange，提问作者dan k