Problem while repeating a yo-yo tween

[KrooJWG]

I'm using GSAP to help create a lower third template that gets overlayed onto live video. I've just really started learning how to use GSAP, so this is only the fourth or fifth graphic I've made with it.

 

What should be happening is the lower third expands in width with the red square (replaced by an image) sliding along with it to animate it onto the screen. When it's time to animate it off, it should essentially do the reverse.

 

It all works great, as long as I comment out the line that "rotates" the red square. If it's bouncing back and forth, then it only works maybe 1 out of 10 times. When it doesn't work, it just jumps to the end of the tween. I'm assuming there's something going on with the yoyo-ing that affects the animate out tween.

 

Ideally, I wouldn't use yoyo to get that div to rotate back and forth, so if there's a better way to do that I'm all ears. Maybe putting it on its own timeline?

See the Pen aLKeqN by kroojwg (@kroojwg) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

The problem with the repeating tween is that it makes the timeline's duration virtually infinite.

When you add tweens to that same timeline in stopAnimation() function you are adding them at a time after when the previous tweens were added BUT the timeline has been continually playing past that point. In other words you are adding new tweens at a time that has already past which is why everything disappears immediately. Those new tweens you added complete as soon as they get added. 

 

I'm just making up numbers but lets say the startAnimation timeline has 6 seconds worth of tweens in it and an infinitely repeating tween. If you call the stopAnimation function at a time of 10 seconds (the repeating tweens cause it to play beyond 6 seconds) the new tweens will get added around a time of 6 seconds (in the past).

 

In this case I would not add new tweens to the same timeline. I'd create two separate timelines in each function as shown below:

 

See the Pen KXBKGR?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

This will work fine if you only need to start once and stop once. 

 

 

 

[KrooJWG]

Makes perfect sense. If I'd thought about it a little longer, I probably would have had it. I'm liking GSAP more and more; it makes everything so stupidly easy.

 

Thank you!