如何使用scrollMagic一张一张翻转卡片

Question

我正在使用ScrollMagic和TweenMax制作动画。 动画是那里有四张卡片，而浏览器向下滚动时，每张卡片都一张一张翻转。

我尝试使用每个功能来运行动画。但是问题是触发器位于相同的位置，以便卡同时翻转，以及如何在翻转4张卡时停止向下滚动？

这是我的代码笔 https://codepen.io/MachoBoy/pen/yGXNpg

// init scrollMagic
var controller = new ScrollMagic.Controller();
$('.card-wrapper').each(function(index){
    //build scene
    //console.log(this.children[0]);
    var flipCard = TweenMax.to(this.children[index], 1, {rotationY: -180});
    var scene = new ScrollMagic.Scene({
            triggerElement: this.children,
            offset: 400,
            duration: 300,
            triggerHook: 0.9
        }).setClassToggle(this.children[index], 'flipped').addIndicators().setPin('.card-wrapper').setTween(flipCard).addTo(controller);
})