Anime: Reverse callback?

[Crashtor]

I'm playing an animation, but on complete: I change a few hidden css properties (irreversibly), and I'd really much like to find a way to "undo" them because obviously, they do not change back when the animation is reversed.. Any ideas?

[reaprzzz]

I had the same problem as you. You just need to trigger the animation and the function you desire with some js event (in my case). If you insert the code you want to run after the .reverse(); it should be ejecuted after it.

This is the code I used:

        function somefunction(){
            $("#target").css("pointer-events","all"); //SETTING PROPIERTY ON
            var relativeOffset = anime.timeline();
                relativeOffset
                    .add({
                        //ANIMATION
                    });

            //REVERSE
            document.querySelector('#somebutton').onclick = function() {
                relativeOffset.play();
                relativeOffset.reverse();
                $("#target").css("pointer-events","none"); //SETTING PROPIERTY OFF
            }
        }

Hope it helps.

[digital-flowers]

for the time being i think this little hack will work:

    myTimeline.completed = false;
    myTimeline.complete = () => { 
        // your call back funtion
        console.log("reverse done 😏");
    };
    myTimeline.reverse();
    myTimeline.play();

[Crashtor]

Perfect. Thank you guys.

[lukeed]

Dunno about you guys, but in 2.2.0 I had to do more than completed=false. These are all required changes for the begin and/or complete timeline callbacks to be called.

timeline.began=timeline.completed=false;
timeline.loop=timeline.progress=0;
timeline.reverse();

timeline.begin = _ => console.log('> new begin callback');
timeline.complete = _ => console.log('> new complete callback');

timeline.play();

[luglio7]

I'm testing this solution

• get seek value
• pause timeline
• create a new timeline
• set the seek value
• reverse timeline
• play timeline