スクロールでGSAPを使用してSVGをアニメーション化する

Question

スクロールでGSAPフレームワークを使用してSVGをアニメーション化する方法を理解できません。例えば、私はCSSの@keyframesあります

@keyframes stone { 
    0% { 
     transform: translate(-360px, -400px) rotate(0); 
    } 
    25% { 
     transform: translate(480px, 200px) rotate(0); 
    } 
    26% { 
     transform: translate(480px, 200px) rotate(0); 
    } 
    50% { 
     transform: translate(480px, 400px) rotate(0deg); 
    } 
    51% { 
     transform: translate(480px, 400px) rotate(0deg); 
    } 
    100% { 
     transform: translate(630px, 480px) rotate(720deg); 
    } 
} 

をそしていくつかのdivの開始を想像するとdiv要素の終了ポイントを終了さ（0％、offset.top()）開始点である（100％、offset.top() + div.height()）。いくつかのdivのスクロール状態に応じてSVGをアニメーション化する方法は？

私はこのアニメーションにGSAPを使用したいと思います。

Answer 1

それはTimelineMaxの使用で可能です：

var $ball = $("#ball"), 
    tl = new TimelineMax(); 
tl.to($ball, 2, {x:100,y:20,rotation: 360}); 
tl.to($ball, 2, {x:200,y:300,rotation: 180}); 
// etc... 

$(window).scroll(function() { 
    var content_height = $(document).height(); 
    var content_scroll_pos = $(window).scrollTop(); 
    var percentage_value = content_scroll_pos * 100/(content_height - $(window).height()); 
    if(percentage_value >= 0 && percentage_value <= 100) { 
     tl.tweenTo(tl.duration() * (percentage_value/100)); 
     console.log(percentage_value/100); 
    } 
});