Animieren von SVG mit GSAP auf Bildlauf

Question

Ich kann nicht verstehen, wie SVG mit GSAP-Framework auf Bildlauf animieren. Ich habe CSS @keyframes Zum Beispiel:

@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); 
    } 
} 

Und stell dir vor, dass Anfang von etwas div ist Startpunkt (0%, offset.top()) und das Ende des div endet am Punkt (100%, offset.top() + div.height()). Wie animiere ich meine SVG in Abhängigkeit von meinem Scroll-Status in einigen div?

Ich möchte GSAP für diese Animationen verwenden.

Answer 1

Es ist möglich, mit der Verwendung von 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); 
    } 
});