How to position two staggerTo to run at the same time?

[gimperdaniel]

Looks like the stagger method doesn't have the "position" option. So the second staggerTo only plays after 5 seconds which is the time of the first stagger. I watched the sequence video, and it helped to understand a lot about how the timeline works. But it doesn't mention how to use two staggerTo together.

var locations = new TimelineMax()

.add(TweenMax.staggerTo($(".something-1"), 5, {width:100, height:100, x:"-=50", y:"-=50", opacity:0, repeat:-1}, 1))
.add(TweenMax.staggerTo($(".something-2"), 5, {width:100, height:100, x:"-=50", y:"-=50", opacity:0, repeat:-1}, 1));

To be honest, I am really struggling with the documentation on the site. Is there a place with more tutorials other than what's found on the main site?

 

I have been using this https://www.greensock.com/asdocs/package-summary.html

It helps to see all the options available, but I learn by example

[Diaco]

Hi gimperdaniel 

 

With gap or label you can start tweens at the same time .

 

you can use  label to the timeline, making it easy to mark important positions/times :

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

 

with labe :

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

 

with gaps :

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

[gimperdaniel]

I noticed that you did not use "add". When is "add" necessary?

 

Thanks for the example, that helped me to change my code and get it to work.

[Diaco]

When you want to define and mark special time for a label you can use .add() method , there's several methods to work with the labels... 

 

check this out :

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

[gimperdaniel]

Thanks. I was using add, to chain everything together, but I guess I don't need it.

[Diaco]

please check this :

 

Timeline Tip: Understanding the Position Parameter

http://greensock.com/position-parameter

[Carl]

Perfect solution, Ancient Warrior. 

Thanks for recommending the position parameter article too!