本文旨在解决在使用 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 代码：
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">
@@##@@
</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;
}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" 表示当元素的顶部到达视口底部时开始动画。
总结
通过为每个元素创建独立的 ScrollTrigger 实例，我们可以精确地控制动画的触发时机，避免多个相同类名的元素同时触发动画的问题。 这种方法可以应用于各种滚动动画场景，提高用户体验和页面性能。 记住，理解 ScrollTrigger 的工作原理和灵活运用其配置选项是实现复杂滚动动画的关键。
