Jump to content
Search Community

How to change target of tween after creating it

armen test
Moderator Tag

Go to solution Solved by Diaco,

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

Hello all.

 

Suppose we have 

var selector1 = '.some-class1';
var selector2 = '.some-class2';

var tween = TweenLite.to(selector1, 2, {autoAlpha:1});

How I can change the target of tween to be selector2 without recreating tween?

 

Thanks.

Link to comment
Share on other sites

Hi armen :),

 

I wasn't 100% sure what you were asking. Are you thinking about some event, like a button click, that would change the target? or would some other condition exist that would cause the target to change? or did you mean adding multiple targets to the same tween?

 

You can add multiple targets as an array in the tween:

TweenLite.to([object1,object2], 2, {autoAlpha:1})

A few more specifics would be helpful.

 

Happy tweening. :)

Link to comment
Share on other sites

I don't think anyone would question the accuracy of a Diaco answer.   :D

 

I only asked some questions in case the approach was flexible.  I was just envisioning some sort of buttons that may solve the problem:

 

Click button1 and the target is set to target1

Click button2 and the target is set to target2 etc..

 

Then, call the tween in a function and tween the target. In that case, you could have the one tween to manage. Of course, that is creating a new tween so probably not what the OP wanted.

 

I understand the way the question was asked, that the answer is no.

 

I'm just looking for solutions here, not limitations.  :-P

Link to comment
Share on other sites

Not to beat a dead horse, but I figured I'd just chime in and mention the reasoning...

 

A ton of effort has gone into making GSAP extremely fast because animation is probably the most performance-sensitive (and demanding) task in any app/site. A 150ms delay in loading is barely noticeable but a 150ms delay during an animation is absolutely jarring to the user.

 

When a tween renders for the first time, it does several setup tasks like recording the starting and ending values for all the targets/properties so that interpolation during the tween can be as fast as possible. So if all those values have been recorded for a particular target (or set of targets), it's not a trivial thing to say "oh, just change targets". That basically involves clearing out all those values and re-doing almost all of the startup tasks. Making the engine accommodate something like that (swapping targets) would require a bunch of extra code, making its kb size fatter. It's cleaner to just create a new tween, like the others have suggested here. It keeps performance solid and file size down. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

Thanks for your responses.

 

My task is to organize image loading sequence in two img objects in DOM, then to play tweens. The problem is that at the time of creating tween I don't know on which image object it will be playing. I came up with a solution of creating same tween for each img object and playing whichever is appropriate at the time of playback. At first glance duplicate objects don't look good, but that duplication will not even consume noticeable memory. So this solution is good.

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...