GSAP 和 ScrollMagic：填充顶部和引脚间隔答案

【问题标题】：GSAP and ScrollMagic: Padding top and pin spacerGSAP 和 ScrollMagic：填充顶部和引脚间隔
【发布时间】：2020-04-07 20:59:38
【问题描述】：

我正在使用 GSAP v3 和 ScrollMagic v2.0.7。

我面临的问题是，在动画完成并向上滚动（反向：false）后，它正确地注册了我不想再次反向执行动画，但它创建了一个等于场景持续时间：

const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
  triggerElement: "#responsive-divider",
  duration: "100%",
  triggerHook: 0,
  reverse: false
})
  .setTween(action)
  .setPin("#responsive-divider")
  .addTo(controller);

在这种情况下，id为“responsive-divider”的元素的高度是311px，所以“scrollmagic-pin-spacer”类得到一个padding-top: 311px;

如果我检查元素并删除 padding-top 则一切正常。

为什么会这样？有没有办法防止这种情况发生？

PS1：如果我不禁用“反向”，那么它工作得很好。但在这种情况下，我不想获得反向动画。

PS2：我找到了解决此问题的方法，但我不知道它是黑客还是解决方案。在我的时间轴上，我使用了“onComplete:removePadding”，并执行了以下操作：

function removePadding() {
  document.querySelector(".scrollmagic-pin-spacer").style.paddingTop = null;
}

对我来说有点 hacky。

提前致谢！

【问题讨论】：

这是一个 ScrollMagic 问题 - 我会在其 GitHub 存储库中发布，但它并没有真正维护，所以我不会抱有希望。我会使用替代方法在滚动时触发动画。 GreenSock 正在制作自己的滚动库。旁注：您可以使用 .set() 设置样式，更方便：gsap.set(".scrollmagic-pin-spacer", {paddingTop: ""});
@ZachSaucier 感谢您的意见！实际上，当我们在场景中滚动时，我离开了 setPin() 并选择了一个普通的动画。就像你说的，联系 Greensock 时，他们提到他们很快就会有他们的 ScrollMagic 替代品来解决所有问题。手指交叉！ :)

标签： gsap scrollmagic

【解决方案1】：

添加triggerHook: 0 为我解决了问题！

【讨论】：