scrollmagic - ScrollMagic 要素を別のシーンから固定解除する

Question

赤いカードが画面の上部にピン留めされ、黄色のカードがその上を転がるこのレイアウトがあります。黄色の下端が赤の下端に達したら、赤の固定を解除する必要があります。これにより、黄色が赤をつかんで上に引っ張るように見えます。

私の見解ではremovePin()、別のシーン、.yellowastriggerElementを使用するシーンから呼び出す必要がありますoffsetが、うまくいきませんでした。私も a を設定しようとしましたdurationが、黄色が赤にロールオーバーすることはありません。代わりに、期間が下から現れるまで待ちます。

HTML:

<div class="content">
    <div class="green"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="purple"></div>
    <div class="brown"></div>
</div>

Javascript:

var controller = new ScrollMagic.Controller();
var slides = ['.green', '.red', '.yellow', '.purple', '.brown'];

var scene1 = new ScrollMagic.Scene({
    triggerHook: 'onLeave',
    triggerElement: slides[1],
    offset: -20,
    logLevel: 3
})
.setPin(slides[1])
.addIndicators()
.addTo(controller);

JSfiddle: http://jsfiddle.net/rLj18ud2/