offset tweens after a negative offset

[friendlygiraffe]

I have a sequence of Tweens in a timeline that are staggered by 0.2 seconds.

 

I want them to start 2 seconds early (before the white box fades out)

 

How do I get dot2 to follow dot1 sequentially?

 

Thanks

See the Pen dMxzog by friendlygiraffe (@friendlygiraffe) on CodePen

[GreenSock]

There are many ways to do it, but here's the most concise: 

tl.staggerTo([".dot1", ".dot2", ".dot3", ".dot4"], 0.3, {x:"+=150"}, 0.2, "-=2");

[friendlygiraffe]

 

There are many ways to do it, but here's the most concise: 

tl.staggerTo([".dot1", ".dot2", ".dot3", ".dot4"], 0.3, {x:"+=150"}, 0.2, "-=2");

Thanks, but what if there are a series of different timings, with different properties? Something like:

.to(".dot1", 0.3, {x:"+=150"},"-=2")
.to(".dot2", 0.3, {y:"+=150"},"+=0.2")
.to(".dot3", 0.3, {rotation:"+=150"},"+=0.7")
.to(".dot4", 0.3, {alpha:0},"+=6.2")

[Carl]

Yes, that is a bit different.

In that case, a nested timeline is probably the most straight-forward route:

 

 

var tl = new TimelineLite({onComplete:loop}),
count = 0;


var Stag = 0.2;
var Del = 2.0;


tl.to(".whitebox", 4, {autoAlpha:0})




var child = new TimelineLite()
child.to(".dot1", 0.3, {x:"+=150"})
.to(".dot2", 0.3, {y:"+=150"},"+=0.2")
.to(".dot3", 0.3, {rotation:"+=150"},"+=0.7")
.to(".dot4", 0.3, {x:100, y:100},"+=1")


//place the child at 2 seconds into tl or wherever you want
tl.add(child, 2)

http://codepen.io/GreenSock/pen/bpXYYJ?editors=0010

[friendlygiraffe]

Thanks, that's perfect

[GreenSock]

Another technique you could use is with a label:

tl.addLabel("dots", 2)  .to(".dot1", 0.3, {x:"+=150"},"dots")
  .to(".dot2", 0.3, {y:"+=150"},"dots+=0.2")
  .to(".dot3", 0.3, {rotation:"+=150"},"dots+=0.7")
  .to(".dot4", 0.3, {alpha:0},"dots+=6.2");

I personally prefer Carl's technique with splitting things up into child timelines just because it makes things so modular and easy to create functions that spit back animations that can be nested however/wherever you want. Some people prefer using labels, though. Totally up to you.