GSAP ScrollTrigger：控制相同动画在不同视口元素上的独立触发-js教程-PHP中文网

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

心靈之曲

发布： 2025-07-20 16:22:18

原创

544人浏览过

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"
  });
});

登录后复制

代码解释：

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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

HTML 结构示例：

<div class="intro">
  <h2>Scroll to see magic happen</h2>
</div>
<!-- Start Story -->
<div class="story">
  <div class="story__media">
    <img src="https://images.pexels.com/photos/16763202/pexels-photo-16763202.jpeg" alt="ALT TEXT">
  </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">
    <img src="https://images.pexels.com/photos/16763202/pexels-photo-16763202.jpeg" alt="ALT TEXT">
  </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">
    <img src="https://images.pexels.com/photos/16763202/pexels-photo-16763202.jpeg" alt="ALT TEXT">
  </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;
}

登录后复制