Jump to content
GreenSock

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

TweenMax updateTo

Recommended Posts

Hi,

 

First off, thanks for a great library.

 

I've been trying to change a tween on the fly, specifically the x value for a DOM element. For some reason the updateTo method doesn't seem to work. Maybe because x is converted to a css value it is considered a plugin-value when used on dom elements?

 

I've created this pen to illustrate the issue:

See the Pen eduhJ by klas (@klas) on CodePen

 

If you click the {x: 10} button before you play the animation the tween updates as expected. Any subsequent calls to updateTo after the animation has been played or scrubbed does nothing.

 

The js docs suggests using the DynamicPropsPlugin but as far as I understand it is only available for AS. Not sure it's on the roadmap for js but I can definitely see a use case for it in responsive design.

 

Cheers

Klas

Link to post
Share on other sites

Hi Klas and welcome to the GreenSock forums.

 

There are two things to notice in this particular scenario.

 

First. The updateTo() method is not basically intended for changing values that are tweened by plugins, in this case the CSS Plugin. Long story short, as soon as you start the TweenMax instance nested in the timeline, the CSS Plugin wraps every CSS related property (x in this case) in a css:{} key:pair object. That's the reason why your code is not working after the animation has played.

 

Second. The method can't update a tween while it's playing. I'm not completely sure about this (Carl or Jack would have to tell if I'm right or not), but it could be a performance issue if the engine had to check on every tick if any of the tweens curently playing has been changed.

 

When the changes to the tweens are passed once it has ended or is paused, you need to wrap the updateTo params in a css:{} object in order to work:

$update.on('click', function() {
    tl.getChildren()[0].updateTo({ css:{x: 10} }, true)
});

$update2.on('click', function() {
    tl.getChildren()[0].updateTo({ css:{x: 490} }, true)
});

But if yo want to change the values on the fly you'll have to pause the current tween/timeline, kill the current instance so it goes to garbage collection right away, then create it again with the new parameters and finally restart everything from the position it was paused.

tl.to($text, 4, {x:490}, "label1");

// update code
$update.on('click', function()
{
  tl.pause().remove(tl.getChildren()[0])
    .fromTo($text, 4, {x:0},{x:10}, "label1").play();
});

$update2.on('click', function()
{
  tl.pause().remove(tl.getChildren()[0])
    .fromTo($text, 4, {x:0},{x:490}, "label1").play();
}); 

Finally in your codepen you're pointing to version 1.11.2, that's a bit old. The current version is 1.11.8, it would be better if you point to that one. Also when using the CDN links you can point to the latest version:

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

Rodrigo.

  • Like 3
Link to post
Share on other sites

Thanks for the very thorough reply, very useful information. I ended up just killing and re-creating all the tweens whenever the window is resized and then just resuming the timeline progress.

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

×