使用 GSAP ScrollTrigger 独立控制多个相同动画元素-js教程-PHP中文网

使用 GSAP ScrollTrigger 独立控制多个相同动画元素

霞舞

发布： 2025-07-20 16:40:01

原创

668人浏览过

使用 gsap scrolltrigger 独立控制多个相同动画元素

本文旨在解决在使用 GSAP ScrollTrigger 时，多个相同类名的元素同时触发动画的问题。通过循环遍历元素并为每个元素创建独立的 ScrollTrigger 实例，确保动画仅在相应元素进入或离开视口时运行，实现更精细的滚动控制。

在使用 GSAP (GreenSock Animation Platform) 和 ScrollTrigger 插件时，你可能会遇到一个常见的问题：当页面上有多个具有相同类名的元素，并且都绑定了相同的滚动动画时，滚动到其中任何一个元素都会触发所有元素的动画。这并不是我们想要的效果，我们希望每个元素的动画只在它进入或离开视口时才触发。

解决方案

解决这个问题的关键在于为每个元素创建独立的 ScrollTrigger 实例。这意味着我们需要遍历所有目标元素，并为每一个元素创建一个单独的 timeline 和 ScrollTrigger 配置。

以下是一个详细的步骤和示例代码，演示如何实现这个效果：

获取所有目标元素： 首先，使用 document.querySelectorAll() 方法获取所有需要应用动画的元素。
循环遍历元素： 使用 forEach() 方法遍历所有获取到的元素。
为每个元素创建 Timeline 和 ScrollTrigger： 在循环内部，为当前元素创建一个 GSAP Timeline 实例，并在 ScrollTrigger 配置中将 trigger 属性设置为当前元素。

通义万相
通义万相，一个不断进化的AI艺术创作大模型

596

查看详情

gsap.registerPlugin(ScrollTrigger);

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

stories.forEach((s) => {
  var tl = gsap.timeline({
    scrollTrigger: {
      trigger: s, // 将 trigger 设置为当前元素
      scrub: true,
      end: "bottom top", // 动画结束于元素的底部到达视口顶部时
    },
  });

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

登录后复制

代码解释：

gsap.registerPlugin(ScrollTrigger); 注册 ScrollTrigger 插件。
document.querySelectorAll(".story"); 选择所有类名为 "story" 的元素。
stories.forEach((s) => { ... }); 循环遍历每个 "story" 元素。
trigger: s 将 ScrollTrigger 的触发器设置为当前遍历到的 "story" 元素 s，而不是所有元素的公共类名。
scrub: true 启用滚动条擦除效果，使动画与滚动条位置同步。
end: "bottom top" 设置动画结束的位置，当元素的底部到达视口顶部时结束。
tl.from(s.querySelector("img"), { ... }); 为当前 "story" 元素中的图片创建 from() 动画，从 scale: 2 缩放到默认大小。

完整示例

以下是一个完整的示例，包括 HTML、CSS 和 JavaScript 代码：

HTML:

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js?v=3.3.0-3"></script>
<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;
}

登录后复制

JavaScript:

gsap.registerPlugin(ScrollTrigger);

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

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

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

登录后复制

注意事项

确保 GSAP 和 ScrollTrigger 已正确引入： 在使用代码之前，请确保你已经正确引入了 GSAP 库和 ScrollTrigger 插件。
选择器准确性： 确保 document.querySelectorAll() 方法选择器能够准确地选择到你想要动画的元素。
性能优化： 如果页面上有大量的动画元素，请考虑使用 GSAP 的 batch() 方法来优化性能。
start 和 end 属性： start 和 end 属性决定了动画开始和结束的位置。根据你的具体需求调整这些属性。例如，start: "top bottom" 表示当元素的顶部到达视口底部时开始动画。