jquery - Scrollorama を学ぼうとしている

Question

週末に scrollorama を学ぼうとしました。過去に多くの jquery プラグインを学んで使用しようとしましたが、問題はありませんでした。しかし、これは本当に私を混乱させます。

私は、stackoverflow やスーパースクロールラマのチュートリアルに関する他の Web サイトを検索しましたが、正確な方法を指定しているものはありません。

この目的のために、ここでフィドルを作成しました。

http://jsfiddle.net/4o46jdj7/1/

これが私がやろうとしていることです。赤い div が固定され、#text-1 が上にスクロールしてフェードアウトし、フェードアウトした後、下部のテキストが上にスクロールし、完了したら固定を解除してフッターに移動する必要があります。

これが私が使用しているコードです

var controller = jQuery.superscrollorama({
    triggerAtCenter: false,
    playoutAnimations: true
});

var pinAnimations = new TimelineLite();
pinAnimations
    .append(TweenMax.from(jQuery('#text-1'), .5, {css:{marginTop:'300px'}, ease: Quad.easeInOut}))
    .append(TweenMax.to(jQuery('#text-1'), .5, {css:{opacity: 1}}))
    .append(TweenMax.to(jQuery('#text-2'), .5, {css:{bottom:'30px'}}));

    controller.pin(jQuery('#member'), 600, {
        anim:pinAnimations
    });