How Do I Reset A Tween?

[dada78]

Hi,

I love to be able to use the Javascript version of Tweenlite, however, I can't figure out how to reset a tween?

I have a function set up that should reset the tween when called. Any suggestions are highly appreciated.

 

 

Thanks!

Dada

[Carl]

Hi, 

 

Not sure what you mean by "reset". Is the invalidate() method what you are looking for? That will allow you to clear out recorded values. 

 

If you simply want the tween to play from the beginning, restart() would do that.

 

If you want to simply set the tween back to its beginning state, you can set:

 

 

 

myTween.time(0)
 

 

 

If you need more help, feel free to post a very simple example that illustrates what you would like to do.

[dada78]

Hi, thanks for your suggestions, however I am new to Tweenlite and am not sure exactly how to go about doing the reset of the tween.

 

So what i would like to do is have one function with a simple Tweenlite animation like so:

function expand(){
TweenLite.to(expand_content, 1, {height:198});
TweenLite.to(player, 1.5, {opacity:1, delay:1});
}

 

and then another function which gets fired when a button is clicked.

 

This should reset the animation to the beginning, so when the user clicks again and the expand(); function gets called again, the animation should play again.

 

function reset() {

}

 

I would like to keep js file size down, so only imported the following js:

 

<script src="CSSPlugin.min.js"></script>
<script src="EasePack.min.js"></script>
<script src="TweenLite.min.js"></script>

 

Is there anything else I would need to accomplish that?

Thanks!

Dada
  

[jamiejefferson]

Calls to TweenLite.to() return a TweenLite instance, so you can save this and issue commands to the tween to play, pause, reverse, jump to position etc

var expandTweens = [];

function expand() {
    expandTweens = [];
    expandTweens.push(TweenLite.to(expand_content, 1, {height:198}));
    expandTweens.push(TweenLite.to(player, 1.5, {opacity:1, delay:1}));
}

function reset() {
    for(var i = 0, length = expandTweens.length; i < length; i++) {
        expandTweens[i].pause(0);
    }
}

Alternatively, if you want 'expand' to just initiate 'go back to start and play'

var expandTweens = [];
expandTweens.push(TweenLite.to(expand_content, 1, {height:198}));
expandTweens.push(TweenLite.to(player, 1.5, {opacity:1, delay:1}));

function expand() {
    for(var i = 0, length = expandTweens.length; i < length; i++) {
        expandTweens[i].play(0);
    }
}

[dada78]

Sweet! That works like a charm! Thanks a million!

Best,

Dada

[GreenSock]

For the record, a TimelineLite might make things much easier to control. 

 

function expand() {
    var tl = new TimelineLite();
    tl.to(expand_content, 1, {height:198})
      .to(player, 1.5, {opacity:1});
    return tl;
}

//then call it anytime and store a reference to the timeline that was created so that you can control it later
var expandSequence = expand(); 

//then you can control the whole thing very easily without needing to loop through arrays:
expandSequence.restart();
expandSequence.pause();
expandSequence.resume();
expandSequence.seek(0.5);
expandSequence.timeScale(0.5); //plays at half-speed
...etc.

[jamiejefferson]

Yea I probably should have recommended TimelineLite, but only CSSPlugin, EasePack and TweenLite were mentioned so I kept it basic. If you can spare a few more KBs though, timelines are super handy and will make your animations a whole lot easier to manage.