Jump to content
GreenSock

dada78

How Do I Reset A Tween?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
  

Link to comment
Share on other sites

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);
    }
}
Link to comment
Share on other sites

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

Best,

Dada

Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×