GSAP ScrollTrigger问题求助：仅让视口内元素触发滚动动画

核心问题修正点 #

你之前的代码存在三个关键错误，导致所有动画同步触发：

1. 滚动触发器的trigger使用全局类选择器，而非当前遍历的单个元素
2. 动画目标同样用全局选择器，导致所有图片同时执行动画
3. 滚动触发的start/end参数设置不符合“覆盖视口全程”的需求

修正后的代码 #

JavaScript #

gsap.registerPlugin(ScrollTrigger);

// 获取所有目标元素并遍历
const storyMedias = gsap.utils.toArray('.story__media');
storyMedias.forEach(mediaBlock => {
  // 为每个元素创建独立时间线
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: mediaBlock, // 绑定当前元素为触发器
      scrub: true,
      // 动画时机：元素顶部进入视口时开始，元素底部离开视口时结束
      start: "top bottom",
      end: "bottom top",
      // 可选：开启调试标记，方便查看触发范围
      // markers: true
    }
  });
  // 仅对当前元素内的图片执行动画
  tl.from(mediaBlock.querySelector('img'), {
    scale: 1.4,
    ease: "power2"
  });
});

CSS（保持原代码不变） #

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.story {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 4px;
  padding: 64px 0;
}

.story__media {
  grid-column: 2 / span 5;
  overflow: hidden;
}

.story__caption-wrap {
  grid-column: 8 / span 4;
}

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>

<!-- Start Story -->
<div class="story">
  <div class="story__media">
    <img src="https://images.pexels.com/photos/16763202/pexels-photo-16763202.jpeg" alt="ALT TEXT">
  </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">
    <img src="https://images.pexels.com/photos/16763202/pexels-photo-16763202.jpeg" alt="ALT TEXT">
  </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">
    <img src="https://images.pexels.com/photos/16763202/pexels-photo-16763202.jpeg" alt="ALT TEXT">
  </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 -->

关键说明 #

• 独立绑定触发器：通过forEach遍历每个.story__media元素，将当前元素设为trigger，确保每个动画只对应当前元素的滚动状态
• 精准动画目标：使用mediaBlock.querySelector('img')获取当前元素内的图片，避免全局选择器导致的批量动画
• 覆盖视口全程：start: "top bottom"表示元素顶部刚进入视口时开始动画；end: "bottom top"表示元素底部完全离开视口时结束动画，完美覆盖元素在视口中的整个滚动周期

内容的提问来源于stack exchange，提问作者user1406440