Scrollmagic & GASP how to restart animation

Question

I'm creating an animation of a book. the pages should turn fast (as i did in the animation) but I want them to go back in the starting position after e scroll back out of the trigger range. below is the js code and the codepen link.

$(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

Use the on leave event and include a tween with the opposite animation.

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

Hope that helps.