javascript - ScrollMagic を使用して複数のシーンを連続してアニメーション化する

Question

ScrollMagic と GSAP を使用してこのイントロ効果を再構築しようとしています: http://airnauts.comスクロールすると、イントロの「スライド」(テキスト付き) が次々に表示されたり消えたりすることに注意してください。

基本的に、ステージ コントローラー、シーン (含まれる div - '.hero-unit')、およびアニメーション用のいくつかのトゥイーンをセットアップしました。ただし、各スライド (合計 3 つ) を次のような順序でアニメーション化する方法がわかりません。

1. ウェブサイトに入り、スクロールを開始します。
2. 最初のスライドは (staggerFromTo メソッドを使用して) アニメーション化されます。
3. スライドが完全にアニメーション化されたら、不透明度を 0 に戻します (または画面の外に移動するなど)。
4. 2 のように、2 番目のスライドを表示します。
5. 3.などと同じ。

インターネットで解決策として見つけたものはすべて試しました。「TimelineMax」を使用してみましたが、onComplete でアニメーション化が完了したらスライドを非表示にしようとしましたが、何も機能していないようです。これまでのコードは次のとおりです。

var pinOrigin = {
                opacity: 0
            };
            var pinEnd = {
                opacity: 1,
                yoyo: true,
                ease: Back.easeOut
            }

            var tl = TweenMax.staggerFromTo('.hero-unit .scene:first-of-type', 1, {opacity:0}, {opacity: 1});

            var pin = new ScrollScene({
                triggerElement: '.hero-unit',
                triggerHook: 'onLeave',
                duration: 1000
            }).setPin('.hero-unit').setTween(tl).addTo(controller);

要約すると、スクロール中にさまざまなシーンをステージングし、それらの間を適切に切り替えるにはどうすればよいでしょうか??