Share Posted November 7, 2017 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 Link to comment Share on other sites More sharing options...
Share Posted November 7, 2017 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! 5 Link to comment Share on other sites More sharing options...
Author Share Posted November 7, 2017 Perfect, thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now