Scrollmagic 和 GSAP 如何重新启动动画

Question

我正在制作一本书的动画。页面应该快速转动（就像我在动画中所做的那样），但我希望它们在 e 滚动回触发范围后回到起始位置。下面是js代码和codepenlink。

$(document).ready(function ($) {
    var controller = new ScrollMagic.Controller();

    var scene = new ScrollMagic.Scene({
            triggerElement: "#trigger1",
            offset: 400,
        })
        // animate color and top border in relation to scroll position
        .setTween(".st34", 0.1, {
            rotation: "170_cw",
            transformOrigin: '100% 65%',
            repeat: -1
        }) // the tween durtion can be omitted and defaults to 1
        .addIndicators({
            name: "libri"
        }) // add indicators (requires plugin)


        .addTo(controller)

        /////"light years" indocator///////


        scene.on("update", function (e) {
            $("#progress").text(e.scrollPos)
        });

    ////////////////////////////////
    var scene = new ScrollMagic.Scene({
            triggerElement: "#trigger1",
            offset: 400,
        })
        // animate color and top border in relation to scroll position
        .setTween(".st35", 0.3, {
            rotation: "170_cw",
            transformOrigin: '100% 75%',
            repeat: -1
        }) // the tween durtion can be omitted and defaults to 1
        .addIndicators({
            name: "libri"
        }) // add indicators (requires plugin)


        .addTo(controller);

    ///////////////////////////////////////
    var scene = new ScrollMagic.Scene({
            triggerElement: "#trigger1",
            offset: 400,
        })
        // animate color and top border in relation to scroll position
        .setTween(".st36", 0.5, {
            rotation: "170_cw",
            transformOrigin: '100% 85%',
            repeat: -1
        }) // the tween durtion can be omitted and defaults to 1
        .addIndicators({
            name: "libri"
        }) // add indicators (requires plugin)


        .addTo(controller);

});

Answer 1

使用 on leave 事件并包含一个带有相反动画的补间。

scene.on("leave", function (event) {
    console.log("Restart Fist Animation");
})

希望对您有所帮助。