Jump to content
Search Community

Tweens get blocked if you have a repeat:-1 tween before within a timeline?

venn test
Moderator Tag

Go to solution Solved by Dipscom,

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

Hi team,

 

I noticed when I am using timeline, if there is a tween that uses repeat:-1, the tweens afterwards will get stuck unless you specify the absolute time they should be playing in the timeline. 

My workaround is to separate looping tweens into its own tween.

But is there any other way that will allow me to add a looping tween in a timeline while still have other tweens after that?

TL
.to(TweenA, 1, {x: 10, repeat: -1} <- Keeps looping.
.to(StuckTweenB, 1, {x: 10} <- Will not play.
.to(NotStuckTweenC, 1, {x: 10}, 4); <- Will play.
Link to comment
Share on other sites

It would be nice to provide a codepen for your issue buddy. Welcome to GSAP Forum!

I suggest use different functions with animation inside and call them at same time. for example:

window.onload = init; //call the function that will call all the animation at same time.

function init() {
   one();
   two();
}

function one() {
   // tl animation here repeating
}

function two() {
  // tl animation not repeating
}

Hope it helps buddy!

GSAP Enthusiast
Waren

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi Venn,

 

I am afraid you can't add a infinite looping tween to a timeline and have other tweens play after it without some tinkering. That is because the looping tween, is infinite thus, everything after that will wait forever before playing. And forever can be a very long time.

 

You can accomplish the same effect by separating the looping tween from the actual timeline and have the timeline control it. One way is what you are doing, with absolute position parameters. You can also use labels:

TL
.to(TweenA, 1, {x: 10, repeat: -1}, "Start") // Because there are no "Start" label defined, GSAP will create one here.
.to(StuckTweenB, 1, {x: 10}, "Start") // This will start at the same time as the tween above.
.to(NotStuckTweenC, 1, {x: 10}, "Start+=1") // This will start one second after the other two.

You can .call() a function that fires that tween:

TL.call(function() {
 TweenMax.to(TweenA, 1, {x:10, repeat:-1})
}
.to(TweenB, 1, {x:10})
.to(TweenC, 1, {x:10})

Bear in mind that the timeline has no control over this tween and its duration will not be taken in consideration (hence why it works).

 

You can separate the tween and timeline into functions, like Waren has suggested, or you can create separate timelines one main and one for the repeating tween, controlling the repeating one from the main timeline. Amongst other strategies.

 

Really, there are a few options, it will boil down to what you want to achieve.

  • Like 4
Link to comment
Share on other sites

TL 
.to(TweenB, 1, {x:10})
.to(TweenC, 1, {x:10});

TweenMax.to(TweenA, 1, {x:10, repeat:-1})

I will go for this approach right now as it is sufficient for what I need. Just keep looping tweenA when TL starts.

 

With .call() I will assume you can determine at which point within the timeline, you want to bring TweenA in?

TL 
.to(TweenB, 1, {x:10})
.to(TweenC, 1, {x:10})
.call(yolo);

is different to

TL 
.to(TweenB, 1, {x:10})
.call(yolo)
.to(TweenC, 1, {x:10});

function yolo(){
TweenMax.to(TweenA, 1, {x:10, repeat:-1});
}
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.
×
×
  • Create New...