I'm very new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this gold bar across the screen (and fade it in/out) in three tweens. However, between each tween in the timeline is a distinct pause for a quick moment before the next tween begins. I tried firing the tweens before the others finished, but that seemed to break the animation when it repeated. How do I make this animation one continuous motion and allow it to be repeated indefinitely?
Here is my js right now:
var $loader = $('#load'),
tl;
tl = new TimelineMax({repeat: -1});
tl.from($loader, 1, {x: '-=40%', transformOrigin:"0% 50%" , autoAlpha: 0, scaleX: .2, ease:Power2.linear})
.to($loader, 1, {x: '+=60%', ease:Power2.linear})
.to($loader, .8, {x: '+=10%',autoAlpha: 0, scaleX: .2, transformOrigin:"100% 50%" , ease:Power2.linear});