Jump to content
Search Community

Issue while combining timelines, staggerFromTo, and repeat

gavanw test
Moderator Tag

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, I've been working on building a loading 'spinner', had the basic animation working, but I've ran into an issue once I tried to add my tweens to a timeline.

 

The code that works is:

 

        TweenMax.staggerFromTo(bars, duration, {
            opacity: 0.6,
            repeat: -1
        }, {
            opacity: 0.2,
            repeat: -1
        }, duration / numberOfBars);
However, when I add a timeline:
        var tl = new TimelineMax({align:'sequence'});
        tl.fromTo($spinner, 0.5, {
            opacity: 0
        }, {
            opacity: 1
        });
        tl.addLabel('loop')
        tl.staggerFromTo(bars, duration, {
            opacity: 0.6,
            repeat: -1
        }, {
            opacity: 0.2,
            repeat: -1
        }, duration / numberOfBars);
        tl.play(0);
the staggerFromTo does not seem to repeat and plays only once.

 

(I was not sure whether the 'from' or the 'to' needed the repeat paramater, but seems like it needs to be in the 'to'.)

 

Am I doing something wrong there?

 

Thanks,

Gavan

Link to comment
Share on other sites

Yep, that's because the convenience methods use TweenLite instances, not TweenMax (so that we can keep file size requirements down). TweenLite doesn't recognize repeat, yoyo, or repeatDelay special properties. So the solution is to simply insert a regular TweenMax instead of utilizing a convenience method:

 

tl.add( TweenMax.staggerFromTo(...) );

Believe it or not, the repeat/yoyo functionality we use requires a fair amount of extra code because we don't do it the "quick and dirty" way that most other engines do. Most others simply use an onComplete of sorts that calls a method that then starts the next iteration but that can actually lead to some significant slippage in terms of time/precision. For example, imagine you've got a tween that's supposed to repeat 9 times and it's 1 second long. It should finish in exactly 10 seconds. But imagine what happens if the frame rate lags during the tween and the last frame renders 0.25 seconds late, thus the next iteration starts 0.25 seconds late and pins its start time there. Let's say that happens each time, so by the end of the repeats, you're now 2.25 seconds late! and then what if you rewind to a specific spot - it can get very messy when handled "quick and dirty". 

 

We use a different technique that requires a lot more code but is FAR more precise and completely avoids all the messiness. The iterations are all calculated from the very beginning, so there's no slippage of start times on subsequent iterations. This ensures that all the tweens in a timeline remain perfectly synchronized too. 

 

All that's to explain why TweenLite doesn't have repeat/yoyo/repeatDelay functionality. Too much kb for a feature that isn't used terribly often. It's a better fit for TweenMax. Of course you can always do it the "quick and dirty" way manually in TweenLite using an onComplete that calls the tween's restart() method, but for ultimate precision use TweenMax for repeats. 

  • Like 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...