当前位置：首页 > 文章列表 > 文章 > 前端 > GSAPScrollTrigger滚动动画教程详解

GSAPScrollTrigger滚动动画教程详解

2025-07-23 17:57:29 0浏览收藏

解决 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 结构示例：


  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 样式示例

以下是与上述 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;
}