Align tweens using to() instead of add()

[Vince]

Hi there,

 

Quick question, previously I have been using the add() method in timelinemax to add tweens to the timeline and align their start times:

myTimeline.add([TweenMax.to(element1, 1, {left:100, opacity:0.5}),
TweenMax.to(element2, 1, {right:50, opacity:1})]);

Is it possible to do the same thing just using the to() method? As I'm trying to make my code as lean as possible, along with using the correct methods.

 

In other words have the following tweens all start at the same time:

myTimeline.to(element1, 1, {left:100, opacity:0.5})
.to(element2, 1, {right:50, opacity:1});

Thanks guys

[Rodrigo]

Hi,
 
Sure thing, keep in mind that shorthand methods, like to(), from(), fromTo() and staggers, accept a value (number or string) to set the absolute or relative position of that particular instance in the timeline they reside in.

var tl = new TimelineLite();

tl
  .to(element, time, {vars})//this is added at 0 seconds
  .to(element1, time, {vars}, "-=0.5")//this is added 0.5 seconds before the previous instance is completed
  .to(element2, time, {vars}, "+=0.5")//this is added 0.5 seconds after the previous instance is completed
  .to(element3, time, {vars}, 2);//this is added when the timeline's playhead is at the 2 seconds position, independently of any other instance in the timeline

http://api.greensock.com/js/com/greensock/TimelineLite.html#to()
 
http://api.greensock.com/js/com/greensock/TimelineLite.html#from()
 
Keep in mind that you can align any instance or callback relative to labels as well.
 
Also you have the stagger methods, which you can pass a parameter in order to give some time between those instances start. Keep in mind that stagger methods will set the same duration for every instance:

var tl = new TimelineLite(),
    collection = $(".elementClass");

tl
  .staggerTo(collection, time, {vars}, staggerTime);

http://api.greensock.com/js/com/greensock/TimelineLite.html#staggerTo()
 
In order to get the full range of possibilities for using Timeline take a look at this video:
 
http://www.greensock.com/sequence-video/
 
Finally another option would be to create a function that creates an instance and attach it to the timeline in a specific position:

var tl = new TimelineLite();

function createInstance(target, time, vars, position)
{
  tl.to(target, time, vars, position)
}

//then add the instances to the timeline at zero seconds
createInstance(element1, 1, {left:100, opacity:0.5}, 0);
createInstance(element2, 1, {right:50, opacity:1}, 0);

Rodrigo.

[Carl]

I'm sure Rodrigo's advice will get you off and running just fine.

 

What I typically do when I want multiple tweens to run at the same time is I just add them at the same label

 

var main = new TimelineLite();


main.from("#progress", 1, {scaleX:0, transformOrigin:"left center"})

.to("#box1", 1, {rotation:360}, "boxes")
.to("#box2", 1, {top:100}, "boxes")
.to("#box3", 1, {rotation:-360}, "boxes")

 

http://codepen.io/GreenSock/pen/mIyzu?editors=001

 

 

---

 

I made a note in the CodePen about changing the insertion point of the label too

 

.add("boxes", "+=1") //optional - adds label 1 second after progress bar grows

 

moving the label moves all the tweens. pretty neat;)

 

---

[Vince]

Thanks for the top tips. However I do seem to be having an issue with the following.

 

This works fine:

myTimeline.add(TweenMax.to(lampMatrix.Lamp24_mc.LampSquare_mc, fadeLength, {colorMatrixFilter:{colorize:0xfffe72, amount:1}}));
myTimeline.add(TweenMax.to(lampMatrix.Lamp19_mc.LampSquare_mc, fadeLength, {colorMatrixFilter:{colorize:0xfffe72, amount:1}}));

This doesn't seem to apply the filter or show any errors:

myTimeline.to(lampMatrix.Lamp24_mc.LampSquare_mc, fadeLength, {colorMatrixFilter:{colorize:0xfffe72, amount:1}})
   .to(lampMatrix.Lamp19_mc.LampSquare_mc, fadeLength, {colorMatrixFilter:{colorize:0xfffe72, amount:1}});

What am I doing wrong?

 

PS. I can see your example playing in codepen, but unfortunately no code or comments are visible. Again am I missing something simple there?

 

Thanks

 

Vince

[Carl]

hmm, you should see this when visiting the CodePen link above:

 

CodePen allows you to easily see all the JavaScript, HTML and CSS in modern browsers.

 

I'm a little confused as you posted in the JavaScript forums and your first code animated the left css property (for which the only ActionScript equivalent would be x) and now you are referencing an ActionScript plugin (ColorMatrixFilterPlugin).

 

My guess is that you need to activate the the plugin with

 

import com.greensock.plugins.*;

 

TweenPlugin.activate([ColorMatrixFilterPlugin]);

 

---

 

previously you were creating TweenMax tweens which automatically activate this plugin.

 

[Vince]

Apologies Carl, I hadn't noticed I had posted in the JS section, this is, as you rightly point out is AS3, which is what I'm building in. I copied and pasted an example which must have been from the JS docs. Can you move the thread?

 

Thank you.