基于GSAP Scroll Trigger的滚动颌骨闭合动画适配及新div实现咨询

先给你捋清楚为啥你这动画在PC和移动端都失效：

1. 滚动容器.hero没设置固定高度和滚动属性，ScrollTrigger根本没法监听它的滚动行为
2. ScrollTrigger的start参数写得不完整，且两个动画的触发逻辑不统一，导致同步出问题
3. scrub:1的数值太大，滚动响应会很迟钝

第一步：先让动画正常运行 #

1. 补全滚动容器的CSS #

.hero必须有固定高度和滚动属性，否则ScrollTrigger无法工作：

.hero {
  height: 100vh; /* 移动端可以改用100dvh适配不同视口 */
  overflow-y: scroll;
  position: relative; /* 确保内部元素定位正常 */
}

2. 重写GSAP的ScrollTrigger配置 #

统一两个动画的触发逻辑，用滚动容器作为触发源（避免颌骨元素滚出视口后失效）：

// 先注册插件，没注册的话动画根本启动不了
gsap.registerPlugin(ScrollTrigger);

// 上颌骨动画
gsap.to(".jaws-top-container", {
  y: 500, // 自行调整数值，直到颌骨闭合位置合适
  scrollTrigger: {
    trigger: ".hero",
    start: "top top", // 容器顶部碰视口顶部时开始动画
    end: "bottom bottom", // 容器底部碰视口底部时完成动画
    scrub: 0.5, // 调小数值让滚动响应更灵敏
    scroller: ".hero",
    markers: true // 调试用，完成后记得删除
  }
});

// 下颌骨动画，和上颌骨同步触发
gsap.to(".jaws-bottom-container", {
  y: -550, // 自行调整数值匹配上颌骨闭合位置
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    end: "bottom bottom",
    scrub: 0.5,
    scroller: ".hero",
    markers: true
  }
});

第二步：实现颌骨闭合后显示新div #

1. 在HTML中添加要显示的内容 #

<div class="container-fluid hero">
  <!-- 你原有的上下颌骨、内容容器 -->
  <div class="container-fluid jaws-top-container">...</div>
  <div class="container-fluid hero-content"></div>
  <div class="container-fluid jaws-bottom-container">...</div>
  
  <!-- 新增的内容容器，初始隐藏 -->
  <div class="post-jaw-content" style="display:none; opacity:0;">
    这里放颌骨闭合后要显示的内容
  </div>
</div>

2. 给GSAP添加显示/隐藏逻辑 #

监听动画进度，当进度达到100%（颌骨完全闭合）时显示新内容，滚动回退则隐藏：

// 修改上颌骨的动画配置，添加进度监听回调
gsap.to(".jaws-top-container", {
  y: 500,
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    end: "bottom bottom",
    scrub: 0.5,
    scroller: ".hero",
    onUpdate: function(self) {
      // progress为1代表动画完全完成（颌骨闭合）
      if (self.progress === 1) {
        gsap.to(".post-jaw-content", { 
          display: "block", 
          opacity: 1, 
          duration: 0.3 
        });
      } else {
        // 滚动回退时隐藏内容
        gsap.to(".post-jaw-content", { 
          display: "none", 
          opacity: 0, 
          duration: 0.3 
        });
      }
    }
  }
});

// 下颌骨动画保持之前修正后的配置即可

额外提醒 #

• 上下颌骨的初始位置建议用CSS的transform或position:absolute固定，避免动画起始位置混乱
• 移动端测试时，把.hero的高度改成100dvh，适配不同移动端的视口高度
• 调试完成后记得删除markers:true，避免影响页面显示

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