v1系とv2系で
アニメーション部分が分離されて、classっぽい書き方になったので
だいぶ違うみたい。メモ。

使い方

DLする

janpaepke/ScrollMagic
https://github.com/janpaepke/ScrollMagic

core:
/scrollmagic/minified/ScrollMagic.min.js

tweenMaxを使うなら必要なプラグイン：
/scrollmagic/minified/plugins/animation.gsap.min.js

読み込む

上記2つと必要ならjqueryも先頭で読み込む

記述する

1.全体を管理するコントローラーを用意する
2.各シーンのアニメーションや付けたいclassとスタイル等を準備する
3.各シーンとアニメーションを紐付け、コントローラーに登録する

var　path0= [{x: -120 , y: -40 }, {x: -90 , y: -5 }, {x: -60 , y: 0}, {x: -30, y: 5}, {x: 0, y: 0}];
$(function(){
    var controller = new ScrollMagic.Controller();　//各シーンを管理する用の「コントローラー」、全体に1つ必要
    TweenLite.set($('#aboutTitle').find('img'), {opacity:0});
    TweenLite.set($('#scene2').find('.text1'), {opacity:0,y:30});

<pre><code>//各シーンのアニメーションを作る。（今回は複数繋げたいのでTimelineMaxを使用）
var tween2 = new TimelineMax()
            .set($('#aboutTitle').find('img'), {
              rotationY:'270deg', x:'-=120',y:'-=40',
              opacity:0,
              ease: Power2.easeOut
            })
            .staggerTo($('#aboutTitle').find('img'), 1.8, {
              rotationY:'0deg',
              opacity:1, ease: Power2.easeOut,
              transformOrigin:'50% 50%',
              bezier:{
                values: path0
                }
            },0.05).to($('#scene2').find('.text1'), .8, {
              opacity:1,
              y:0,
              ease: Power2.easeOut
            });

//「コントローラー」に登録する各シーンを登録する。
//アニメーションを付ける場合
var scene = new ScrollMagic.Scene({
                    triggerElement: "#scene2",//どこに来たら発火するのか
                    reverse:false //逆戻りの時の効果はなし（今回は）
                    // duration: 400,　//スクロールにあわせてアニメーション変化するときは変化の範囲（スクロール量）を指定
                    // triggerHook: 'onEnter',　//発火のトリガーを変更する場合は'onEnter'や'onLeave'などの文字列を渡す
                })
                .setTween(tween2) // トリガーが引かれた時のアニメーションを登録する
                .addIndicators() // add indicators (requires plugin)
                .addTo(controller);

//要素を固定する場合
// var scene = new ScrollMagic.Scene({
//                  triggerElement: "#jsTitleArea2",
//                  // duration: 400,//pin する距離を数値で指定する場合
//                  triggerHook: 'onLeave',//pin するタイミングをフレームのどこにきたタイミングかで指定する場合
//              })
//              .setPin("#jsTitleArea2")
//              .addIndicators({name: "setPin Title2"}) // add indicators (requires plugin)
//              .addTo(controller);
</code></pre>

});

またあとでわからなくなりそうなまとめだ。。。うーん。

docs

ScrollMagic Documentation
http://janpaepke.github.io/ScrollMagic/docs/index.html

最初の一回だけ（順方向へのスクロールの場合だけ）アニメーションさせたい場合はreverse:false
Animate only on FORWARD · Issue #71 · janpaepke/ScrollMagic
https://github.com/janpaepke/ScrollMagic/issues/71