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

Posted 2023-05-08

【中文标题】GSAP ScrollTrigger - 为每个部分创建时间线

【英文标题】：GSAP ScrollTrigger - Create a Timeline for Every Section

【发布时间】：2021-02-18 02:06:38

【问题描述】：

我有一个“项目”页面，我在其中展示项目片段，并且我希望每个片段都在滚动时淡入。我正在尝试使用以下 html 和 javascript 为每个项目实施时间表：

<!-- Page contains multiple projects that follow this template -->
<div id="project-trigger">
     <div class="project">
          <img class="project-image" src="image1" >
          <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,
        opacity:0,
        duration:0.5,
        stagger:0.2
    , "-=0.5")

)

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

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

代码笔：https://codepen.io/jacobcollinsdev/pen/jOrpKja?editors=1010

【问题讨论】：

您很可能不希望每个项目都使用相同的触发器 - 您需要特定于该项目的触发器。此外，您的轻松是无效的 - 它应该只是"power2"。过去，请发送minimal, complete, and verifiable example。

@ZachSaucier 谢谢，我已更新问题以包含代码笔。所以不知何故，我必须为每个项目项目制定一个独特的时间表？

【参考方案1】：

您的 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,
    opacity: 0,
    duration: 0.5,
    stagger: 0.2
  , "-=0.5");

Demo

要在开始时摆脱无样式内容的闪烁，请参阅this post。

【讨论】：

这正是我所追求的，感谢您强调这个过程！