Possible to staggerTo with different properties for each element?

[resting]

Say I have 2 elements in .staggerTo(), is it possible to animate different properties for the 2 elements?

 

If not, is creating a different timeline the best solution?

 

The problem here is, I have a timeline1, that has a series of animations, but on the last animation, I want to  animate one element coming in on the left, and another coming in from the right.

 

If I were to create another timeline for the element coming from the right, I'll need to calculate the seconds it should start, which is what I'm trying to avoid.

 

Codepen example with 2 timelines, cause I'm not sure how to do it with staggerTo.

See the Pen GZNNqe by resting (@resting) on CodePen

[OSUblake]

You can use cycle...

var tl = new TimelineMax()
  .staggerTo(["#foo", "#bar"], 1, { cycle: { x: [100, -100]}}, 0, "last");

But I'm not really sure I'm getting the trouble you were having with 2 timelines and calculating the time. You can animate different elements from the same timeline, and can start animations at the same time using a label. So the code above could be written like this.

var tl = new TimelineMax()
  .to("#foo", 1, { x:  100 }, "last")
  .to("#bar", 1, { x: -100 }, "last");

In my opinion, it's much easier to read and understand what is going on in the second example.

[Jonathan]

Blake is absolutely right!

 

You can either give both tweens the same label or even give them both the same position parameter like 0.

 

You can find more info on labels and the position parameter in the video below

 

 

and this:

 

 

[OSUblake]

You can either give both tweens the same label or even give the

 

Looks like something got cut off there.

[Jonathan]

Thanks Blake, i just fixed the sentence