Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Updating CSS Attribute of 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

I am using TimelineMax for a project and I was wondering is there was a way to possibly update the CSS attribute of a Tween by calling it's label?


For example my tween would look like:


var tl = new TimelineMax({paused:true});
tl.to(element, time, {css:{top: -50px}}, "my-label");



I would like to possibly call this tween by it's label and update the CSS property to a new value.

I tried something like this, but I had no success.

tl.insert(TweenLite.to(element, time, {css:{top:-100px}}), "my-label");



Any help would be appreciated.



Link to comment
Share on other sites

There are three ways as far as I know, the first one is to change the vars object of the tween:

tl.getChildren()[0].vars.css.top = -100;

The downside of this method is that if the timeline has been already played the original  value (-50px) is recorded and you can't change it, just like Jack explained it in this post.
The other way I know to do that is by deleting the tween and then add the new tween at that label:

var tl = new TimelineMax({paused:true});
tl.to(element, time, {css:{top: -50px}}, "my-label");

Then you remove the tween and add the new one at the same label:

tl.to(element, time, {css:{top: -100px}}, "my-label");

This method forces you to know the index position of the tween you want to eliminate.


And the last one is to add a new tween at the label without removing the previous one, like this you overwrite the old tween with the new one:

tl.to(element, time, {css:{top: -100px}}, "my-label");

But in this case you're overpopulating your timeline and that may create a problem as well, but I couldn't tell you that, maybe Carl or Jack could.


Hope this helps,



  • Like 2
Link to comment
Share on other sites

As Rodrigo pointed out its a fairly tricky affair as once a timeline plays through all the starting and ending values of each tween are recorded. If you change the end values of one tween, the next tween that has the same target would need its starting valuesupdated also. 


The reason the values are recorded is to increase performance. People want to jump through timelines, speed them up, slow them down, reverse them etc. It would be very inefficient if the engine had to repeatedly check over and over again for changes and make adjustments. 


To build upon one of Rodrigo's suggestions. You can remove a tween, recreate it, and then put it back into the timeline. If you create a reference to that tween




var dynamicTween = TweenMax.to()


you don't have to worry about its index in the timeline.


Here is a fiddle that illustrates the ability to change the end values of a tween that is in the middle of a timeline: http://jsfiddle.net/YCvs7/1/


Notice that the motion is 







After the animation has played a few times click the "change tween" button.


The animation will change to 



right and red



*also note that the timeline is invalidated when it restarts to ensure that all previous start values are reset.





I would like to possibly call this tween by it's label and update the CSS property to a new value.


Just to help you understand the API better, I want to point out that tween's don't have labels, timelines do. The "label" is just a string representation of a particular time in a timeline. 




tl.to(element, time, {css:{top: -50px}}, "my-label");

The above code says "insert a tween at the label called "my-label" in the timeline".

Not, "create a tween with the label "my-label". 


I don't mean to be nit-picky, just trying to make sure you see exactly how it works.

  • Like 3
Link to comment
Share on other sites

This is excellent, thank you very much for the help and for the JSFiddle demo. I think this is exactly what I need.  I also appreciate the clarification on my misuse of the labels on the timeline as this will help me down the road.

I was also wondering about the TimelineMax function add(), I've tried to use this function before when jQuery is loaded (jQuery-1.8.0) and it looks like jQuery thinks the timeline object is trying to reference the jQuery function add().  Has anyone else had problems with this?


The jQuery add function:




Link to comment
Share on other sites

This is strange, because there should be no confusion in the browser over the .add() functions. jQuery and GSAP work very nicely together and you'll see a lot of us on these forums using them both.


If you call .add() on a jQuery collection, then it will use the jQuery add().

If you call .add() on a TimelineLite or TimelineMax, then it will use the timeline add().


Are you absolutely sure you are calling .add() on a GSAP Timeline and it is doing something with jQuery? e.g.

// Good
var elements = $('p');
elements.add('.elements #specificelement');

var mytimeline = new TimelineLite();
mytimeline.add( TweenLite.to(elements , 2, {left:100}) );
// Bad
var elements = $('p');
elements.add( TweenLite.to(elements , 2, {left:100}) );

var mytimeline = new TimelineLite();
mytimeline.add('.elements #specificelement');
  • Like 1
Link to comment
Share on other sites

Thank you for the help on this jQuery matter. I believe my implementation is pretty close to the appropriate use, but to be sure I'll provide a snippet.  Also, something to note, this is being used on a Drupal site, I don't think it matters, but I thought I would include it.


My usage:


var elements = {
   $elementOne : $('#jQueryOne'),
   $elementTwo : $('#jQueryTwo')

var gsTweens = {
   one: "",
   two: ""

var tl = new TimelineMax({paused:true});
gsTweens.one = TweenLite.to(elements.$elementOne, time, {css:{top: -50px}});
tl.add(gsTweens.one, "label");

//later on

gsTweens.one = TweenLite.to(elements.$elementOne, time, {css:{top: -100px}});
tl.add(gsTweens.one, "label");


The error I get from the console log is:

Uncaught TypeError: Object [object Object] has no method 'add'


As for removing and the tween and re-adding it to the timeline, this looks like the perfect solution, however I am wondering if I replace a tween that has already been played with a new tween with new values, can I execute this new tween in the timeline by moving backwards through the timeline or will this not work?


I appreciate it.

Link to comment
Share on other sites

Are you sure you are using a recent version of GSAP. Current version is 1.9.0.

The add() method was introduced at the end of January in 1.8.4 (I believe). 


Click on the getGSAP button (upper left) and grab the latest files. 

Or just grab TweenMax.min.js:



<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>

Let us know if that fixes the issue. Like Jamie, I've used jQuery with timelines with add() with no issue.


If the issue persists please provide a simple example that reproduces the error. http://www.codepen.io works great for this.


We'd love to get this sorted out.

  • Like 1
Link to comment
Share on other sites

The add() issue has been resolved, the issue was infact that I was using an older version of TimelineMax (TimeLineMax VERSION: beta 1.641).  Thank you for this information, I should have looked closer.

  • Like 1
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.