ScrollMagic 的舞台定位问题答案

【问题标题】：Stage positioning issue with ScrollMagicScrollMagic 的舞台定位问题
【发布时间】：2023-04-08 11:12:01
【问题描述】：

我使用 GreenSock 和 ScrollMagic 创建了一个效果很好的动画，但我不知道如何调整舞台/图形的初始位置（在用户触发动画之前）。目前，我正在使用“stage”类在容器元素上调用 .setPin 方法。这个舞台元素位于一个更大的父容器 (#how-it-works) 中，它是动画的 triggerElement：

var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation);

我遇到的问题是舞台元素最初“卡在”父容器的顶部，我希望它在触发动画之前在父容器中垂直居中。我尝试调整 .stage 元素上的 'top' CSS 属性，但这需要我使用 !important 并且会产生奇怪的结果。是否有一些参数/参数专门控制 ScrollMagic 中固定元素的定位？

这是一个带有我的动画的代码笔 - http://codepen.io/BillKroger/pen/bwNXZV（确保向下滚动）

非常感谢任何帮助！

【问题讨论】：

标签： jquery gsap scrollmagic

【解决方案1】：

好的，我能够弄清楚 - 我最终将舞台/图形包装在一个额外的容器中，并使用 top 属性给它相对定位。然后对于 Javascript，我只是为场景实例添加了一个偏移量，确保它等于应用到新容器的顶部位置属性。以下是所有更改：

HTML：

<div class="stage-wrapper">  <!-- new container -->
   <div class="stage">
      <div class="svg-image"></div>
      <div class="svg-image"></div>
      <div class="svg-image"></div>
   </div>
</div>

CSS：

.stage-wrapper {
   position: relative;
   top: 300px;
}

Javascript：

var scene = new ScrollMagic.Scene({
   triggerElement: "#how-it-works", 
   duration: 4000
})

.setPin(".stage")
.addTo(controller)
.setTween(scrollAnimation);

// add a scene offset amount equal to the top positioning for the new container
scene.offset(300);

更新的 Codepen：http://codepen.io/BillKroger/pen/bwNXZV

这可能不是解决问题的唯一方法，但上面的解决方案最终在我的情况下工作。

【讨论】：