Использование булавки и анимации с ScrollMagic

Я работаю над проектом, в котором мне нужно, чтобы несколько 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;
}