slightly overlapping animations on the stage

[jeansandjacktrequired]

I have a new question you regarding code pen:

 

See the Pen GqWxgj by PointC (@PointC) on CodePen

 

 

how can I get these animations to run a bit quicker and slightly overlap each other as one animates in and the other animates out.  I have been playing with the code a bit. I tried adding this: '-=0.15'  to the code but it didn't work.
 

var tl = new TimelineMax();

 

tl.staggerFrom(".box", 1, { cycle:{ x:[ -400,400,0,0 ],y:[0,0,-400,400] } },3)

tl.staggerTo(".box", 1, { cycle:{ x:[ 400,-400,0,0 ],y:[0,0,400,-400] },autoAlpha:0 },3,2,'-=0.15' )

tl.from(".lastBox", 1, {x:400})

 

any help is appreciated, thx

[Dipscom]

If you want to modify the stagger part of the tweens, it is the first property after the variables on the .staggerFrom() and .staggerTo() methods

 

tl.staggerFrom(element, duration, {variables}, stagger)

 

Here's the docs section:

 

http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/staggerFrom/

 

The last line, you can add the "-=0.15" after the variables to create the overlap that you're after.

 

You might want to watch this video:

 

[jeansandjacktrequired]

Thanks!