GSAP不是必需的。我建议使用浏览器的Intersection Observer API
工作演示：https://codepen.io/rabelais88/pen/NWYRXdJ

<script src="...your lottie url"></script>
<style>
body {
  overflow-y: scroll;
}

#root {
  height: 10000px;
}

.lottie-player {
  position: fixed;
  top: 0;
  left: 0;
}

p {
  padding: 20px;
}

.anchor {
  position: absolute;
  top: 5000px;
}

</style>
<div id="root">
  <div style="width: 300px; height: 300px;" class="lottie-player" data-animation-path="https://assets8.lottiefiles.com/packages/lf20_pjulrn8x.json"></div>

  <p>scroll downward to make it work!</p>
  <p class="anchor">animation activates here</p>
</div>

const lottiePlayer = document.querySelector(".lottie-player");

lottie.loadAnimation({
  container: lottiePlayer,
  renderer: "svg",
  loop: true,
  autoplay: false,
  path: lottiePlayer.dataset.animationPath,
  name: "on-scroll-anim"
});

const options = {
  root: null,
  rootMargin: "0px",
  threshold: [0, 0.2, 1]
};

const handleIntersect = (entries) => {
  const anchor = entries[0];
  if (anchor.isIntersecting && anchor.intersectionRatio >= 0.2) {
    lottie.play("on-scroll-anim");
  } else {
    lottie.pause("on-scroll-anim");
  }
};

const observer = new IntersectionObserver(handleIntersect, options);
observer.observe(document.querySelector(".anchor"));

• 这是你正在寻找的（添加洛蒂动画在Gsap时间轴擦洗与scrollTriger）？

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import lottie from "lottie-web";

// Register the ScrollTrigger plugin with GSAP
gsap.registerPlugin(ScrollTrigger);

// lotties animation

const lottieContainer = document.querySelector(".ai__mockup-lottie");

let playhead = { frame: 0 },
    animation = lottie.loadAnimation({
        container: lottieContainer,
        renderer: "svg",
        loop: false,
        autoplay: false,
        path: lottieContainer.dataset.src, 
    });


// section animation

animation.addEventListener("DOMLoaded", function () {
    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: ".ai__main",
            pin: true, 
            pinReparent: true,
            // anticipatePin: .2, // may help avoid jump
            start: "top top", // when the top of the trigger hits the top of the viewport
            end: "+=2000", // end after scrolling 2000px beyond the start
            scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
            markers: true,
        },
    });
  
// use lotties animation with scrolltrigger
    tl.to(playhead, {
        frame: animation.totalFrames - 1,
        duration: lottieContainer.dataset.duration,
        ease: "none",
        onUpdate: () => animation.goToAndStop(playhead.frame, true),
    })
  .to(".ai__desc", { rotation: 360 });
});