'Sliding cards' using ScrollMagic

Question

See here: https://jsfiddle.net/xqxur32w/

I am trying to achieve a 'sliding card' effect where one card will slide up as you scroll down, while the others don't move. As soon as the sliding card hits the top of the view, the following card will start moving. In code, I am using scrollmagic to pin all cards initially, pin the first moving card as soon as it reaches the top, and then unpin the following one as soon as the previous one reaches the top (sorry if this sounds confusing, happy to clarify). There is a 'jumping effect', however, and it breaks the effect. Any idea what could be going wrong here?

Thanks!

$(function() {
  // get all cards
  var cards = document.querySelectorAll(".card");
  //init controller
  var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
      triggerHook: 'onLeave'
    }
  });
  //pin the 0th card as soon as it reaches the top
  new ScrollMagic.Scene({
      triggerElement: cards[0]
    })
    .setPin(cards[0])
    .addTo(controller);
  //pin all others  
  new ScrollMagic.Scene({})
    .setPin(cards[1])
    .addTo(controller);
  new ScrollMagic.Scene({})
    .setPin(cards[2])
    .addTo(controller);
  new ScrollMagic.Scene({})
    .setPin(cards[3])
    .addTo(controller);
  new ScrollMagic.Scene({})
    .setPin(cards[4])
    .addTo(controller);

  //unpin the first card when the 0th card reaches the top
  new ScrollMagic.Scene({
      triggerElement: cards[0],
    })
    .setPin(cards[1])
    .addTo(controller);
});