使用 GSAP ScrollTrigger 实现元素级滚动动画-js教程-PHP中文网

使用 GSAP ScrollTrigger 实现元素级滚动动画

DDD

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

原创

824人浏览过

使用 gsap scrolltrigger 实现元素级滚动动画

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

解决 ScrollTrigger 同时触发多个动画的问题

在使用 GSAP 的 ScrollTrigger 插件时，如果多个元素具有相同的类名，并且你希望在滚动到每个元素时分别触发动画，可能会遇到所有元素同时触发动画的问题。这是因为 ScrollTrigger 默认情况下会选择所有匹配选择器的元素，并为它们应用相同的触发器。为了解决这个问题，我们需要遍历每个元素，并为每个元素单独创建 ScrollTrigger 实例。

解决方案：循环遍历并创建独立的 ScrollTrigger 实例

以下是一种有效的解决方案，它使用 querySelectorAll 获取所有目标元素，然后使用 forEach 循环遍历这些元素，并为每个元素创建一个独立的 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"
  });
});

登录后复制

代码解释：

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

gsap.registerPlugin(ScrollTrigger);: 确保 ScrollTrigger 插件已注册，这是使用该插件的前提。
const stories = document.querySelectorAll(".story");: 使用 querySelectorAll 获取所有类名为 "story" 的元素，并将它们存储在 stories 变量中。
stories.forEach((story) => { ... });: 使用 forEach 循环遍历 stories 数组中的每个元素，story 变量代表当前循环到的元素。
var tl = gsap.timeline({ ... });: 为每个 story 元素创建一个新的 GSAP 时间线 tl。
scrollTrigger: { trigger: story, ... }: 关键在于这里。将 trigger 属性设置为当前的 story 元素，而不是一个通用的类名选择器。这样，ScrollTrigger 就会只监听当前 story 元素的滚动位置。
scrub: true: 启用滚动擦除效果，使动画与滚动同步。
end: "bottom top": 定义动画结束的位置。这里设置为当元素的底部到达视口顶部时结束动画。
tl.from(story.querySelector("img"), { ... });: 使用 tl.from() 方法定义动画。这里选择 story 元素内的 img 元素，并设置其初始缩放比例为 2，缓动函数为 "power2"。

HTML 结构示例

以下是一个与上述 JavaScript 代码配合使用的 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 样式示例

以下是与上述 HTML 结构配合使用的 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;
}

登录后复制