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

霞舞

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

679人浏览过

来源于php中文网

原创

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

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

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

解决方案

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

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

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

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 代码：

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

下载

HTML:




  Scroll to see magic happen



  
    @@##@@
  
  
    
      Title of Block 1
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
  





  
    @@##@@
  
  
    
      Title of Block 2
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
  





  
    @@##@@
  
  
    
      Title of Block 3
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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" 表示当元素的顶部到达视口底部时开始动画。