jquery - snap.svg と scrollmagic を使用した形状のアニメーション化

Question

ユーザーがスクロールするときにヘッダーをアニメーション化するコードを作成しようとしています。snap.svg と scrollmagic の 2 つの異なるプラグインを使用して、必要なアニメーションを作成することができました。私はこれらの両方に慣れていないので、私の初心者を許してください。

これは CodePen にあります: http://codepen.io/anon/pen/dYbPXe

/* Animation 1 */

                    var speed = 250,
                    easing = mina.easeinout;

                [].slice.call ( document.querySelectorAll( '.header > a' ) ).forEach( function( el ) {
                    var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                        pathConfig = {
                            from : path.attr( 'd' ),
                            to : el.getAttribute( 'data-path-hover' )
                        };

                    el.addEventListener( 'mouseenter', function() {
                        path.animate( { 'path' : pathConfig.to }, speed, easing );
                    } );

                    el.addEventListener( 'mouseleave', function() {
                        path.animate( { 'path' : pathConfig.from }, speed, easing );
                    } );
                } );


/* Animation 2 */
var scrollMagicController = new ScrollMagic();
var tween = TweenMax.to('.header-shape > path', 0.5, {
    fill: 'rgb(255, 39, 46)'    
});

var scene = new ScrollScene({
    triggerElement: '.background',
    triggerHook: '0',
    duration: 400
}).setTween(tween).addTo(scrollMagicController);
scene.addIndicators();

現在、ページをスクロールするとヘッダーの色が変わり、ヘッダーにカーソルを合わせると形が変わります。形状の変化をスクロールにバインドしたいので、ユーザーがスクロールすると、色だけでなく形状も徐々に変化します。

これは簡単なことかもしれませんが (おそらく不要かもしれません)、あまりにも多くの時間を費やしすぎて、イライラしています。事前にご協力いただきありがとうございます。

編集：質問が明確でない場合はお知らせください。明確にするよう努めます。私は本当にこの効果が欲しいです:(