Jump to content


Remove pauses between timeline tweens

Recommended Posts

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 = 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

Link to comment
Share on other sites

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!

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.