Timeline animation is different when repeated

[catico]

Hi,

 

I have a timeline which I created beforehand and put it on pause. Then on trigger I run it with 

tl.play(0)

it plays correctly the very first time but subsequent repeats are not right. What am I missing?

 

Thanks for help! 

See the Pen aYKWgN by catico (@catico) on CodePen

[Shaun Gorneau]

Something to do with the offsets ... I've removed them and it appears to be functioning as you would expect it to.

 

See the Pen RMJZMw by sgorneau (@sgorneau) on CodePen

 

[Visual-Q]

I'm not exactly sure what the animation is supposed to do I think it's supposed to do a kind of double blink but I believe the problem is because the timing on your second "blink" is overlapping the first one.

 

The first animation would end at 0.9 but your telling the second to start at 0.75.

[Carl]

yup. when you have two tweens at the same time trying to animate the same property of the same object you will cause an overwrite which means the new tween will kill the existing tween. Its wasteful to have 2 tweens fighting for control at the same time so GSAP has this optimization built in. So when you play your timeline again, some of the tweens have been killed thus making the animation look different.

 

2 solutions: 

 

• change your timing so that tweens do no not overlap as the guys suggested
• put overwrite:"none" on the offending tweens

 

demo of overwrite:"none"

 

EDIT : Previously had wrong demo here / fixed now

 

See the Pen oqyGbg?editors=0010 by GreenSock (@GreenSock) on CodePen