Search code examples
animationtimelinegsap

Can't get GSAP to return to initial state

... and I've scoured the web for answers. I boiled down the problem as much as I could in this jsfiddle: https://jsfiddle.net/tko8rk5j/14/

There are 2 button, you click Go then Boost. I'm trying to get the whole svg back to its initial position after the end of the Boost animation, so you can play the same sequence again and again.

I attempted various solutions suggested in other posts: 

// tl.pause(0);
// tl.restart();
// tl.remove();

I also tried using the repeating TimeLineMax, but that just repeats the first animation sequence after the first click on Go button.

Solution

  • I'm not quite sure about what you're ultimately trying to do (which could greatly influence how I'd recommend building this effect), but here's a fork that I believe delivers the result you were asking for:

    https://jsfiddle.net/2q1qrvty/7/

    Your code was jumping back to the beginning before your animation even had a chance to run at all. Plus it was re-using the same timeline and constantly adding to it which isn't very efficient.

    To make it go back to the beginning and stop as soon as it's done, just use an onComplete callback, like: 

    tl.eventCallback("onComplete", function() {
   tl.pause(0);
});

    There are a bunch of other ways to do this, but I don't want to overwhelm you :)

    You may have better luck asking your questions in the dedicated GSAP forums at https://greensock.com/forums/

    Happy tweening!