delay() doesn't work second time

[Voo]

Hello guys! Can u help me? I have problem, my timeline's doesn't want to go back with delay second time.

 

Sorry for my bad english!

See the Pen OvVgYe by voo_front (@voo_front) on CodePen

[Acccent]

Hi Voo,

 

.delay() can be a bit misleading – when you call blue.play().delay(0.5), you set the initial delay for blue to 0.5s. When you call it again later on, you set that initial delay to 0.5s again, which doesn't do anything because it was already set to that value.

 

The reason it doesn't wait again is because .delay() is only for the initial delay, that is the time before the animation plays for the first time. It is not part of the animation itself (which is why it isn't affected by the animation's timeScale). If you reverse the animation and then play it again, it will go to its starting position, but that initial delay is already 'gone'.

 

If you want a tween that always starts after 0.5s, an easy way would be to use the position parameter like this:

blue.to('.blue', 1, {x: '500%', ease: Power4.easeIn}, 0.5);

 

If you want to add a waiting period at the end of an animation, you can add an empty tween like this: 

red.to({}, 0.5, {});

(or add a label)

 

That way, when you reverse the animation, it will first "tween" nothing for 0.5s, then proceed with the tween that comes before that.

 

(PS: this is a very minor thing, but maybe not everyone is a guy here  )