当前位置：首页 > 文章列表 > 文章 > 前端 > GSAPScrollTrigger：独立控制视口动画触发

GSAPScrollTrigger：独立控制视口动画触发

2025-08-04 18:12:30 0浏览收藏

问题分析

出现所有元素同时触发动画的原因在于，ScrollTrigger 的 trigger 属性指向了所有元素的集合，而不是单个元素。当第一个元素进入视口时，ScrollTrigger 认为所有元素都进入了视口，因此触发了所有元素的动画。

解决方案

为了解决这个问题，我们需要遍历所有目标元素，并为每个元素创建一个独立的 ScrollTrigger 实例。这样，每个 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"
  });
});

代码解释：

document.querySelectorAll(".story"): 使用 querySelectorAll 获取所有类名为 story 的元素，返回一个 NodeList 集合。
stories.forEach((story) => { ... }): 使用 forEach 循环遍历 NodeList 集合中的每个元素。
trigger: story: 将 ScrollTrigger 的 trigger 属性设置为当前循环的元素 story。这样，ScrollTrigger 只会监听当前元素的滚动状态。
story.querySelector("img"): 在当前循环的元素 story 内部查找 img 元素。确保动画只应用于当前元素内部的图片。
end: "bottom top": 设置动画结束的位置，当元素的底部到达视口顶部时，动画结束。

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;
}