Javascript GSAP ScrollTrigger-为每个部分创建时间线

我有一个“项目”页面，在那里我展示项目片段，我希望每一个都在滚动中消失。我试图用以下HTML和JavaScript为每个项目实现一个时间表：

<!-- Page contains multiple projects that follow this template -->
<div id="project-trigger">
     <div class="project">
          <img class="project-image" src="image1" alt="">
          <div class="description">
               <h3 class="project-text">Lorem Ipsum</h3>
               <p class="project-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga impedit numquam modi accusamus.</p>
         </div>
     </div>
</div>

我希望图像从左侧淡入，文本从右侧淡入。目前，它不起作用-图像在中途淡入，然后停止，文本根本没有滚动

有可能实现我的目标吗？如果是的话，我错在哪里

---

代码笔：

您的HTML无效。不能有多个ID相同的元素。如果需要这样做，应该使用类

您还做了一个：当您想要使用范围选择器时，使用泛型选择器。我在关于的文章中写了更多关于如何做到这一点的内容

修复这些错误时，您应该得到如下结果：

const projectTriggers = document.querySelectorAll(".project-trigger");

projectTriggers.forEach(addTimeline);

function addTimeline(project, index) {
  const image = project.querySelector(".project-image");
  const text = project.querySelector(".project-text");
  
  const timeline = gsap.timeline({
    scrollTrigger: {
      trigger: project,
      start: "center bottom",
      ease: "power2",
      toggleActions: "play none none reverse"
    }
  })
  .from(image, {
    x: -200,
    opacity: 0,
    duration: 0.5
  })
  .from(text, {
    x: 200,
    opacity: 0,
    duration: 0.5,
    stagger: 0.2
  }, "-=0.5");
}

---

要在开始时消除未设置样式的内容，请参阅。

很可能您不希望每个项目都使用相同的触发器-您希望使用特定于该项目的触发器。此外，您的易用性是无效的-它应该是“power2”。超过这个，请做一个回答。@Zachsauier谢谢，我已经更新了这个问题以包含代码笔。所以，不知何故，我必须为每个项目制定一个独特的时间表？这正是我所追求的，谢谢你强调了这个过程！

const projectTriggers = document.querySelectorAll(".project-trigger");

projectTriggers.forEach(addTimeline);

function addTimeline(project, index) {
  const image = project.querySelector(".project-image");
  const text = project.querySelector(".project-text");
  
  const timeline = gsap.timeline({
    scrollTrigger: {
      trigger: project,
      start: "center bottom",
      ease: "power2",
      toggleActions: "play none none reverse"
    }
  })
  .from(image, {
    x: -200,
    opacity: 0,
    duration: 0.5
  })
  .from(text, {
    x: 200,
    opacity: 0,
    duration: 0.5,
    stagger: 0.2
  }, "-=0.5");
}