Remove pauses between timeline tweens

[Caj 0 Likes (Newbie)]

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});

 

See the Pen dZpPBR by Caj (@Caj) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Welcome to the forums, @Caj. 

 

That brief pausing is simply the result of the ease you're using. Actually, you defined "Power2.linear" which doesn't exist, so it's using the default ease of Power1.easeOut. That makes each tween start out quickly and then slow down toward the end. There isn't actually a pause inbetween at all (that's an illusion). 

 

All you need to do is set your ease to Linear.easeNone or Power0.easeOut (or any of the Power0 eases). Here's a fork: 

 

See the Pen ea011b0ce87e5af75c15396327df6eda by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

 

And don't worry, you'll get comfortable quickly with GSAP. Once it "clicks" in your brain, you'll love it. (not that I'm biased or anything) 

 

For more information about all the eases, check out the ease visualizer at https://greensock.com/ease-visualizer

 

Happy tweening!

[Caj 0 Likes (Newbie)]

Perfect, thanks!