GSAP ScrollTrigger-为每个部分创建时间表 Demo

问题描述

我有一个“项目”页面，其中展示了项目作品，我希望每个作品都能在滚动中淡出。我正在尝试使用以下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>

let projectTrigger = document.querySelectorAll('#project-trigger');

projectTrigger.forEach(project => {
    let timeline = gsap.timeline({
        scrollTrigger:{
            trigger:"#project-trigger",start:"center bottom",ease:"power2.eaSEOut",toggleActions: "play none none reverse",}
    })

    timeline.from(".project-image",{
        x:-200,opacity:0,duration:0.5
    }).from(".project-text",{
        x:200,duration:0.5,stagger:0.2
    },"-=0.5")
}
)

我希望图像从左侧淡入，文本从右侧淡入。此刻，它不起作用-图像在中途褪色然后停止，并且文本完全没有滚动。

是否有可能实现我所追求的目标？如果是这样，我哪里出问题了？

CodePen：https://codepen.io/jacobcollinsdev/pen/jOrpKja?editors=1010

解决方法

您的HTML无效。您不能有多个具有相同ID的元素。如果需要执行此类操作，则应改用类。

您还使most common ScrollTrigger mistakes之一：当您要使用作用域选择器时，请使用通用选择器。我在关于animating efficiently的文章中写了更多有关如何执行此操作的信息。

修复这些错误后，您应该会得到以下信息：

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,duration: 0.5,stagger: 0.2
  },"-=0.5");
}

Demo

要一开始就摆脱未样式化内容的闪烁，请参见this post。