jquery - 通过 ScrollMagic 使用固定和补间

Question

我正在开发一个元素，我需要几个 div 飞入，然后在滚动时固定到屏幕上。我尝试将两者加在一起，导致 div 奇怪地跳跃。引脚和补间都可以单独完美地工作，但我无法让它们一起正确工作。有什么建议么？我下面有一些代码块。

JQuery:

controller = new ScrollMagic();

var myTween = new TimelineMax()
    .add(TweenMax.to("#myTarget", .5, {
        top: "-=500"
        autoAlpha: 1,
        left: "+=300",
        color: "#aaaaaa"
    }));

new ScrollScene({triggerElement: "#myTrigger"})
    .setTween(myTween)
    .setPin('#myTarget')
    .addTo(controller);

HTML:

<div id="myTrigger" class="space50"></div>
<div id="myTarget" class="label">Stuff</div>

CSS:

.space50 {
    height: 50px;
}
.label {
    border-radius: 8px;
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

Answer 1

为固定目标设置动画并不是一个好主意。原因是需要进行许多计算以确保元素在固定期间出现在正确的位置。 简单的解决方案是在元素周围制作一个包装器并将其固定。 包装器内部发生的事情(动画)是独立的，所以没有问题。 :)

如需更多帮助，请遵循本指南:https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md