offset tweens after a negative offset

[friendlygiraffe 17 Likes (Newbie)]

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 18,893 Likes (Superhero)]

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 17 Likes (Newbie)]

 

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 11,326 Likes (Superhero)]

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 17 Likes (Newbie)]

Thanks, that's perfect

[GreenSock 18,893 Likes (Superhero)]

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.