ScrollMagic从另一个场景取消固定元素

Question

我有这样的布局，其中红色卡片位于屏幕顶部，黄色卡片位于屏幕顶部。当黄色的底部边缘到达红色的底部边缘时，我需要取消固定红色，所以看起来黄色抓住红色并将其拉过顶部。

我的观点是，我需要从另一个场景调用removePin()，使用.yellow作为triggerElement并offset调用场景，但它不起作用。我也试过设置一个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/