ScrollMagic unpin element from another scene - scrollmagic

Question

I have this layout where the red card pins to the top of the screen and the yellow one rolls over it. I need to unpin the red when the bottom edge of the yellow reaches the bottom edge of the red, so it looks like the yellow grabs the red and pulls it across the top.
My take is I need to call removePin() from a different scene, an scene using .yellow as triggerElement with an offset, but it didn't work. I also tried setting a duration but then yellow never rolls over red, instead it waits until duration to show up from the bottom.
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/