Changing a tweens values

[Wargasmic]

Is it possible to change a tweens properties after adding it? I would like to be able to change the start time and duration as well as the properties of the tween.

 

Im adding a tween to a timeline as so within an object..

this.timeline.to(this.$element, arguments[2], arguments[0], arguments[1]);

Now I'd like to be able to store this tween in a variable/array within my object, access it later and alter its values. .to seems to return the timeline, not the tween, so how should I go about storing the tween in a variable for later access and how would I change its values?

 

Cheers!

[Rodrigo]

Hi,

 

The shorthand methods used in timelines return TweenLite instances. In your particular code I don't know what this stands for, but it still should return the particular instance.

 

In terms of changing the values of a Tween, the best approach would be to store the particular tween in a variable, then add that tween to the timeline using the add() method and when the config object is changed, use remove() and then add() again:

var tl = new TimelineLite(),
    vars = {top:200, left:200, opacity:0},
    t;

function createTween()
{
  t = TweenLite.to(target, time, vars);
}

//create the tween
createTween();

//add the tween to the timeline at a specific label
tl
  .add(t, "label1");

//later change the vars object, remove and add the instance to the timeline
vars = {top:100, left:400};

createTween();

tl.remove(t).add(t, "label1");

Another option would be to use the getChildren() method and remove the specific instance or use getTweensOf() to get the specific tween of an element (be careful if the element has more than one instance affecting it) and remove it from the timeline. Then add the new instance to the timeline again.

 

Finally a more drastic approach is kill() the entire timeline and create it again, this could be a little more cumbersome depending on the magnitude of the timeline.

 

Rodrigo.

[Wargasmic]

Thanks Rodrigo,

 

this is just referring to my custom animation object with the timeline variable. I'm using TimelineMax btw. Should the above work in the same way using TimelineMax and TweenMax?

[Rodrigo]

Absolutely, every Lite method works in the same way in Max instances, no worries.

[Wargasmic]

OK, when creating the tween it is being applied/used straight away. I want it to be added to a specific timeline at the specified time with the specified duration and only be used when that timeline is played.

 

See the Pen qpnht by anon (@anon) on CodePen

[Rodrigo]

Hi,

 

In order to add the tween to a specific timeline use the add() method and use isActive() to check if the timeline is playing:

var tl = new TmelineMax({paused:true});

/* a function to create the tween
it has 5 parameters,
1.- the tween's target,
2.- the tween's duration,
3.- the tween's config object,
4.- the timeline it'll be inserted in,
5.- the position in the timeline, could be a label, time or relative to a label
*/

function createTween(target, duration, config, timeline, position)
{
  var t = TweenMax.to(target, duration, config);

  timneline.add(t, position);
}

// now add the tween to the created timeline at exactly 2 seconds
createTween("#div1", 2, {left:500}, tl, 2);

The function in this code can be executed through a user interaction or it can be triggered by the same timeline as well:

var tl = new TimelineMax({paused:true});

tl
  .to("#div2", 2, {opacity:0})
  .call(createTween, ["#div1", 2, {left:500}, "{self}", 2],0)//call the function at the start of the timeline in order to avoid a sync problem
  .to("#div1", 2, {top:300});

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

[Wargasmic]

Thanks again.

 

I seem to be more or less where I want to be with this now. The last thing I need to do is change the duration of the tween after it has been added. I cant seem to see a method for this so i tried to set the duration directly using myTween.duration = n but it doesn't change the duration.

[Carl]

oh, it looks like your other post in the AS forums was a mis-fire.  no worries.

 

duration is a method not a property.

 

myTween.duration(5) should do the trick.

[Wargasmic]

Thanks a lot  Rodrigo, Carl.

 

I've been away for a while so sorry for not replying to this earlier.

 

Sorry for the AS post... Are these forums slightly different to the usual? heh. I don't know how I've manage to post on the AS board, but I've done it twice now.