如何解决ScrollMagic中页面加载时区块幻灯片全部显示的问题？

近期使用ScrollMagic制作区块幻灯片，上手较为顺利，但遇到一个问题：当页面从区块幻灯片顶部直接加载时，所有幻灯片会同时显示，直到页面更新；返回顶部时则能正常只显示第一张幻灯片。尝试在enter和start事件中触发scene.update(true)，但并未解决问题，求强制更新幻灯片的有效方法。

问题截图：幻灯片加载异常时所有面板同时显示的状态

JavaScript代码 #

var controller = new ScrollMagic.Controller();

// 定义面板动画逻辑
var wipeAnimation = new TimelineMax()
    .fromTo("#panel1", {x:  "0%"} , {x: "100%", ease: Linear.easeNone}, 0)  // 向右移出
    .fromTo("#panel2", {x: "-100%"} , {x: "0%", ease: Linear.easeNone}, 0)  // 向左移入
    .fromTo("#panel2", {x:  "0%"} , {x: "100%", ease: Linear.easeNone}, 1)  // 向右移出
    .fromTo("#panel3", {x: "-100%"} , {x: "0%", ease: Linear.easeNone}, 1);  // 向左移入

// 创建固定场景并关联动画
new ScrollMagic.Scene({
        triggerElement: ".main",
        triggerHook: "onLeave",
        duration: "300%"
    })
    .on("start", function (event) {
    })
    .setPin(".main")
    .setTween(wipeAnimation)
    .addTo(controller);

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>

    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>
    <div class="main">
      <div id="panel1" class="panel">
        <p>redacted</p>
      </div>

      <div id="panel2" class="panel">
        <p>redacted</p>
      </div>
      
      <div id="panel3" class="panel">
        <p>redacted</p>
      </div>
    </div> 

    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
    <script src="index.js"></script>
  </body>
</html>

已尝试无效的方法 #

在enter和start事件中触发：

scene.update(true);

解决方案 #

这个问题本质是页面初始加载时，ScrollMagic场景尚未完成初始化，GSAP动画时间线未同步到正确初始状态，可通过以下方法解决：

1. 手动设置初始面板位置
   不依赖ScrollMagic自动同步，页面加载时直接将非初始面板定位到视野外：

   // 初始化时将panel2、panel3移出视野
   gsap.set("#panel2", {x: "-100%"});
   gsap.set("#panel3", {x: "-100%"});
   

   确保页面刚加载时仅显示panel1，后续ScrollMagic动画可正常接管。

2. 延迟更新控制器
   页面资源未完全加载可能导致ScrollMagic计算偏差，延迟执行控制器更新：

   // 场景创建后延迟100ms更新控制器，可根据实际调整时长
   setTimeout(function() {
       controller.update(true);
   }, 100);
   

3. 优化控制器与CSS配置

   • 初始化控制器时添加全局配置，提升场景计算准确性：

     var controller = new ScrollMagic.Controller({
         globalSceneOptions: {
             triggerHook: "onLeave",
             reverse: true
         }
     });
     

   • 确保CSS定位正确：.main设置为position: relative，.panel设置为position: absolute; width: 100%; height: 100%; top: 0;，保证面板正确叠加移动。

4. 替换为GSAP ScrollTrigger（可选）
   若ScrollMagic问题难以根治，可改用GSAP官方的ScrollTrigger插件，它与GSAP兼容性更强，初始化和状态同步更稳定，配置逻辑更直观。

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