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的开头是起点（0％，offset.top()），div的结尾是终点（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);
    }
});

在滚动时使用GSAP动画SVG

1 个答案: