本文旨在解决在使用 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"
});
});代码解释：
- 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">
@@##@@
</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 样式示例
以下是与上述 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;
}总结
通过循环遍历元素并为每个元素创建独立的 ScrollTrigger 实例，可以有效地解决多个相同类名的元素同时触发动画的问题。 这种方法确保动画只在目标元素进入或离开视口时触发，从而实现更精细的滚动控制。 记住，trigger 属性是关键，它应该指向当前循环到的元素，而不是一个通用的类名选择器。
