Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Caj

Remove pauses between timeline tweens

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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;

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.
×