在 ScrollMagic 中使用 pin 和 tween答案

【问题标题】：Using pin and tween with ScrollMagic在 ScrollMagic 中使用 pin 和 tween
【发布时间】：2014-06-14 08:36:14
【问题描述】：

我正在做一个项目，我需要几个 div 飞入，然后在滚动时固定到屏幕上。我尝试将两者加在一起，这会导致 div 奇怪地跳来跳去。 pin 和 tween 都可以完美地单独工作，但我无法让它们一起正常工作。有什么建议么？我在下面有一些代码块。

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;
}

【问题讨论】：

标签： jquery html css scrollmagic

【解决方案1】：

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

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

【讨论】：