使用gsap/ScrollTrigger实现Lottie滚动播放动画异常求助

使用gsap/ScrollTrigger实现Lottie文件的动画播放控制时，普通滚动功能运行正常，但滚动到ScrollTrigger绑定的元素动画触发位置时功能异常。

已尝试方案 #

• 使用gsap官方提供的lottie相关辅助函数
• 使用Chriss Gannon提供的scrollLottie方案

以下是当前的完整代码，可直接复制到Codepen运行，也可在Codepen搜索用户名amini-py查找对应项目。

依赖引入 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js" integrity="sha512-v8B8T8l8JiiJRGomPd2k+bPS98RWBLGChFMJbK1hmHiDHYq0EjdQl20LyWeIs+MGRLTWBycJGEGAjKkEtd7w5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/@lottiefiles/lottie-interactivity@1.6.0/dist/lottie-interactivity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.min.js"></script>

HTML结构 #

<div class="wrapper-child">
  <div class="child">
    <h5>First</h5>
    <p>lorem ipsum sit amet sssssssssssssssssssssss</p>
  </div>
  <div class="child">
    <h5>Second</h5>
    <p>lorem ipsum sit amet sssssssssssssssssssssss</p>
  </div>
  <div class="child">
    <h5>Thirds</h5>
    <p>lorem ipsum sit amet sssssssssssssssssssssss</p>
  </div>
  <div class="child">
    <h5>Fourth</h5>
    <p>lorem ipsum sit amet sssssssssssssssssssssss</p>
  </div>
  <div class="child">
    <h5>Fifth</h5>
    <p>lorem ipsum sit amet sssssssssssssssssssssss</p>
  </div>
</section>

CSS样式 #

.wrapper {
  width: 90vw;
  height: 250px;
  overflow-y: hidden;
  display: flex;
}

.wrapper-child {
  border: 1px solid red;
  width: 50%;
}

原有JS逻辑 #

LottieInteractivity.create({
  player: "#firstLottie",
  mode: "scroll",
  actions: [
    {
      visibility: [0, 1.0],
      type: "seek",
      frames: [0, 300]
    }
  ]
});

gsap.registerPlugin(ScrollTrigger);

const sections = gsap.utils.toArray(".child");

gsap.to(sections, {
  yPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".wrapper",
    pin: true,
    scrub: 1,
    start: "top center",
    end: () => "+=" + document.querySelector(".wrapper").offsetHeight
  }
});

功能异常来自两套滚动监听逻辑的冲突：LottieInteractivity默认监听页面原生滚动事件计算元素可见度，但当前实现的分段滚动是ScrollTrigger通过CSStransform属性模拟的位移动画，并非真实的页面滚动偏移，LottieInteractivity无法正确获取元素在视口中的实际位置，触发逻辑混乱。

移除LottieInteractivity的初始化代码，将Lottie动画的进度控制也交给ScrollTrigger统一管控，通过ScrollTrigger的滚动进度回调直接驱动Lottie帧跳转，彻底避免事件冲突。
替换原有JS逻辑为以下代码即可：

gsap.registerPlugin(ScrollTrigger);

// 获取lottie播放器实例
const lottiePlayer = document.querySelector('#firstLottie');
// 等待lottie资源加载完成后再绑定动画逻辑
lottiePlayer.addEventListener('ready', () => {
  const lottieIns = lottiePlayer.getLottie();
  const totalFrames = lottieIns.totalFrames;
  const sections = gsap.utils.toArray(".child");

  gsap.to(sections, {
    yPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".wrapper",
      pin: true,
      scrub: 1,
      start: "top center",
      end: () => "+=" + document.querySelector(".wrapper").offsetHeight,
      // 滚动过程中同步映射lottie播放帧
      onUpdate: (self) => {
        const frame = totalFrames * self.progress;
        lottieIns.goToAndStop(frame, true);
      }
    }
  });
});

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