GSAP ScrollTrigger多触发器异常：视频播放报错排查

报错原因 #

报错Uncaught TypeError: Cannot read properties of null (reading 'play')的核心是获取的视频元素为null，调用play()方法时触发错误，和ScrollTrigger触发器本身的冲突无关。具体有两处问题：

1. 视频触发器的元素获取漏洞：
   当.vid-gsap容器下没有<video>标签时，videoDiv.querySelector('video')会返回null，后续调用videoElem.play()自然报错。

2. CSS动画触发器的逻辑错误：
   你要控制的是.ticker-marquee的CSS动画状态，但代码里错误地获取了容器内的<video>元素，若该容器下无视频元素，cssElem会变成null，调用css()方法也会触发类似错误；同时即便有视频元素，控制的也是视频的动画，而非目标区块的CSS动画。

修复后的代码 #

const hideWebGl = gsap.timeline({
  scrollTrigger: {
    trigger: ".wriggle-cursor",
    scrub: true,
    start: 'top 100%',
    end: 'top -125%',
    onEnter: () => $('.home #canvas').css('display','block'),
    onLeave: () => $('.home #canvas').css('display','none'),
    onEnterBack: () => $('.home #canvas').css('display','block'),
    onLeaveBack: () => $('.home #canvas').css('display','none'),
  },
});

const projectsBackground = gsap.timeline({
  scrollTrigger: {
    trigger: ".projects-section-next .whatwedo",
    scrub: true,
    start: 'top 60%',
    end: 'top -300%',
    onEnter: () => $('.projects-section-next .whatwedo').css('background-color','white'),
    onLeave: () => $('.projects-section-next .whatwedo').css('background-color','transparent'),
    onEnterBack: () => $('.projects-section-next .whatwedo').css('background-color','white'),
    onLeaveBack: () => $('.projects-section-next .whatwedo').css('background-color','transparent'),
  },
});

// 修复视频触发器：先检查元素是否存在
let allVideoDivs = gsap.utils.toArray('.vid-gsap');
allVideoDivs.forEach((videoDiv) => {
  const videoElem = videoDiv.querySelector('video');
  // 仅当找到视频元素时才创建触发器
  if (videoElem) {
    ScrollTrigger.create({
      trigger: videoElem,
      start: 'top 80%',
      end: 'top 20%',
      markers: true,
      onEnter: () => videoElem.play(),
      onEnterBack: () => videoElem.play(),
      onLeave: () => videoElem.pause(),
      onLeaveBack: () => videoElem.pause(),
    });
  }
});

// 修复CSS动画触发器：控制目标元素本身而非内部视频
let allCssAnimation = gsap.utils.toArray('.ticker-marquee');
allCssAnimation.forEach((cssAnimation) => {
  // 直接使用目标区块元素，转成jQuery对象（匹配你原代码的写法）
  const $cssElem = $(cssAnimation);
  ScrollTrigger.create({
    trigger: cssAnimation,
    start: 'top 80%',
    end: 'top 20%',
    markers: true,
    onEnter: () => $cssElem.css('-webkit-animation-play-state','running'),
    onLeave: () => $cssElem.css('-webkit-animation-play-state','paused'),
    onEnterBack: () => $cssElem.css('-webkit-animation-play-state','running'),
    onLeaveBack: () => $cssElem.css('-webkit-animation-play-state','paused'),
  });
});

额外优化建议 #

1. 统一DOM操作方式：要么全用原生JS（比如videoElem.style.display = 'block'），要么全用jQuery，避免混用导致混淆。
2. 给ScrollTrigger添加id属性（比如id: 'video-trigger-' + i），方便在GSAP DevTools中定位调试。

内容的提问来源于stack exchange，提问作者Diced Mango