页面存在多个相同的模块，需要在滚动到各个模块的位置时独立触发该模块的动画效果，实现思路是使用 document.querySelectorAll 获取所有元素获取并通过 forEach 循环遍历元素，然后为每个元素单独创建动画和滚动触发器。

示例：为所有 .box .name 元素添加「滚动到元素时淡入」的效果

Html 代码：

<div class="box">
	<div class="name">Element 1</div>
</div>
<div class="box">
	<div class="name">Element 2</div>
</div>
<div class="box">
	<div class="name">Element 3</div>
</div>

Javascript 代码：

// 获取所有元素
const boxes = gsap.utils.toArray(".box");

// 遍历每个元素
boxes.forEach((box,index)=>{
    const name = box.querySelector('.name');	
    gsap.set(name, {
        y:'-50%',
    });
    gsap.to(name, {
        scale: 0.8,
        y:0,
        duration: 13,
        scrollTrigger: {
            trigger:box,
            start: 'top 50%',
            end: "top top",
            scrub: true,
            toggleActions: 'play reverse play reverse',
        },
    });
});

这样即可实现滚动到哪个box就触发那个的动画效果。