Анимация SVG с GSAP на прокрутке

Question

Я не могу понять, как оживить SVG с помощью рамки GSAP на прокрутке. Например, у меня есть 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 является начальной точкой (0%, offset.top()) и конец DIV является конечной точкой (100%, offset.top() + div.height()). Как оживить мой SVG в зависимости от моего состояния прокрутки в каком-то div?

Я хотел бы использовать 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); 
    } 
});