GSAP ScrollTrigger：控制相同动画在不同视口元素上的独立触发

在使用 GSAP ScrollTrigger 创建滚动动画时，经常会遇到需要对页面上多个具有相同类名的元素应用相同的动画效果。然而，如果配置不当，会导致所有元素在第一个元素进入视口时同时触发动画，而不是各自独立触发。本文将介绍如何通过正确的选择器和循环遍历，确保每个元素在进入或离开视口时独立触发动画，从而实现更精细的滚动控制。

问题分析

出现所有元素同时触发动画的原因在于，ScrollTrigger 的 trigger 属性指向了所有元素的集合，而不是单个元素。当第一个元素进入视口时，ScrollTrigger 认为所有元素都进入了视口，因此触发了所有元素的动画。

解决方案

为了解决这个问题，我们需要遍历所有目标元素，并为每个元素创建一个独立的 ScrollTrigger 实例。这样，每个 ScrollTrigger 实例只监听一个元素的滚动状态，从而实现独立触发动画的效果。

以下是修改后的代码示例：

gsap.registerPlugin(ScrollTrigger);

const stories = document.querySelectorAll(".story");

stories.forEach((story) => {
  var tl = gsap.timeline({
    scrollTrigger: {
      trigger: story,
      scrub: true,
      end: "bottom top"
    }
  });

  tl.from(story.querySelector("img"), {
    scale: 2,
    ease: "power2"
  });
});

代码解释：

1. document.querySelectorAll(".story"): 使用 querySelectorAll 获取所有类名为 story 的元素，返回一个 NodeList 集合。
2. stories.forEach((story) => { ... }): 使用 forEach 循环遍历 NodeList 集合中的每个元素。
3. trigger: story: 将 ScrollTrigger 的 trigger 属性设置为当前循环的元素 story。这样，ScrollTrigger 只会监听当前元素的滚动状态。
4. story.querySelector("img"): 在当前循环的元素 story 内部查找 img 元素。确保动画只应用于当前元素内部的图片。
5. end: "bottom top": 设置动画结束的位置，当元素的底部到达视口顶部时，动画结束。

HTML 结构示例：

文希AI写作

AI论文写作平台

下载

<div class="intro">
  <h2>Scroll to see magic happen</h2>
</div>
<!-- Start Story -->
<div class="story">
  <div class="story__media">
    @@##@@
  </div>
  <div class="story__caption-wrap">
    <div class="story__caption">
      <h2>Title of Block 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>
<!-- End Story -->

<!-- Start Story -->
<div class="story">
  <div class="story__media">
    @@##@@
  </div>
  <div class="story__caption-wrap">
    <div class="story__caption">
      <h2>Title of Block 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>
<!-- End Story -->

<!-- Start Story -->
<div class="story">
  <div class="story__media">
    @@##@@
  </div>
  <div class="story__caption-wrap">
    <div class="story__caption">
      <h2>Title of Block 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>
<!-- End Story -->

CSS 样式示例：

.intro {
  height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid lightgray;
  border-radius: 1rem;
  margin-bottom: 10px;
}
img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 1rem;
  border: 1px solid lightgray;
  border-radius: 1rem;
  margin-bottom: 10px;
}

.story__media {
  overflow: hidden;
  border-radius: 1rem;
}

注意事项

• 确保 GSAP 和 ScrollTrigger 插件已正确引入。
• 根据实际需求调整 start 和 end 属性，以控制动画的触发和结束位置。
• 如果需要更复杂的动画效果，可以在 timeline 中添加更多的 tween。
• 可以使用 markers: true 属性在 ScrollTrigger 中显示标记，方便调试。

总结

通过使用 querySelectorAll 获取所有目标元素，并使用 forEach 循环为每个元素创建独立的 ScrollTrigger 实例，可以有效地解决多个相同类名的元素同时触发动画的问题。这种方法可以确保每个元素在进入或离开视口时独立触发动画，从而实现更精细的滚动控制，提升用户体验。