Jump to content
Search Community

Timeline, modify values in memory

Cyboide test
Moderator Tag

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 there,


For a Timeline object, I would like to know how to change some initial values before calling reverse().


Lets say one of the TL’s tweens is moving the top CSS value of a graphic, a to() taking its current value (lets say 0) to 100.

So the TL plays all the way. Then, at some future point, a reverse will be used, but this time I don’t want that specific tween to go back to 0, but say, to 40.

So now if I do TL.reverse(), it just doesn’t go where it should, and that’s why I need to change the target value the TL has in memory.


Is this possible?

  • Like 1
Link to comment
Share on other sites

Hello Cyboide,


This is possible, to set a different value than the previously recorded value on first run. You can use one of the available kill methods on the tween before declaring the new variable or value.



Available kill methods are as follows:


Kills the animation entirely or in part depending on the parameters.
Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.


Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.


Immediately kills all of the delayedCalls to a particular function.


Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.



You would kill the tween or timeline(s) before declaring a new value on the tween or tween instance(s).


If you can set up a limited

See the Pen by pen (@pen) on CodePen

or jsfiddle so we can see what code you have tried that isnt working. This way we can help you better!


Thanks :)

Link to comment
Share on other sites



Here is an example that I believe does what you need. 



You will see the invalidate() method is called on the "blueTween" which forces the recorded values to be re-recorded the next time the tween runs, and the blue box starts at a new value (left:100 as opposed to 0).


If you need more help please fork that demo or create your own that better helps us understand what you need. 



  • Like 2
Link to comment
Share on other sites

Also, instead of invalidating individual tweens, we often recommend that you call a function that re-creates the timeline from scratch with the proper values. Some folks are inclined to think that creating any type of new object is some sort of awful violation, but in most practical applications it is perfectly fine. The only time I would not advise this is if it involved creating perhaps hundreds or thousands of tweens.


Oh, here you can read about the invalidate() method.

  • Like 1
Link to comment
Share on other sites

But, in the case of a reverse(), the invalidate solution doesn’t work if the tween to invalidate isn’t the last item in the Timeline object, since the targeted graphic would jump to its newly set value until its tween’s turn has arrived in the Timeline.


So if it is of interest, a simple solution inspired by Carl’s second answer:

var tl, moveTween;

var makeMoveTween = function () {
    var pos = /*calculate new value*/;
    moveTween = TweenLite.to(".target", 1, {left:pos});

// Start Timeline
tl = new TimelineLite();

// ... Then, some time later
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.
  • Create New...