Jump to content
Search Community

Infinite repeating and labels

l_andrew_l 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

Hello... first of all amazing library, so useful.


I've been getting to know the library and am trying to make a single master timeline that has different "scenes", then user interaction can play from one scene to the next, stop, and wait from user input.


One thing I've found, however, is that if you have an infinitely repeated animation, this will effectively push the playhead to a huge time in the future (representing "infinity" i'm assuming), then any label added after this will be at that point in the future.


Very simple example here: http://jsfiddle.net/NK3pe/2/


I don't want to jump to conclusions and my approach might certainly be wrong, but wouldn't it make more sense that infinitely repeated animations should not affect the timeline head, as it's assumed that you wouldn't/couldn't put anything after them anyway?


I've looked around the forums and have seen example that pull the tween out of the flow and use callbacks to restart it, etc, but is all that really necessary or is there a simple way that I'm missing?


The problem wouldn't be so bad except that even nested timelines affect their parents, so even one nested repeating animation will effectively push the master's playhead out to infinity. 


Also, I realize that I can add an absolute position to subsequent tweens, but then I would have to add them to ALL tweens after a repeated one, and have to tweak each one if an earlier animation duration changed, etc...


Is there something basic I'm missing here?


Link to comment
Share on other sites

You're right about the huge number; GSAP doesn't actually use an infinite number for repeat:-1. Its represented as a totalduration of 999999999999 seconds (over 30000 years).


Essentially the 'append' style add() is relative to timeline.duration() (or a label e.g. "bounce+=2") when you don't have an absolute insertion point. Adding tweens to a timeline doesn't affect the timeline's 'playhead', timeline.time(), but they do affect the timeline's duration.


It seems like you want infinite tweens to have duration 0, but unfortunately if GSAP did this, it would cause problems for those who do rely on them taking space, since timeline.duration() could no longer be relied on to return a meaningful value.


The best solutions really are to

* add a callback instead that creates an infinite tween (http://jsfiddle.net/z4V6C/)

* add them as non-repeating tweens to begin with, and change repeat to -1 after the timeline is built (http://jsfiddle.net/G8f9K/)

* add infinite tweens after all other tweens have been added (http://jsfiddle.net/68yvU/)

  • Like 4
Link to comment
Share on other sites

Yep, Jamie nailed the explanation.


The whole GSAP system is built in a very cohesive, modular way so that all tweens (TweenLite and TweenMax) and timelines (TimelineLite and TimelineMax) extend a common "Animation" base class that has all the standard methods (play(), pause(), resume(), duration(), totalDuration(), etc.) and timelines are built to accommodate ANY animation - it doesn't care what kind. So you can nest timelines within timelines within timelines as deep as you want. This is an incredibly powerful concept. 


Some people use repeats and yoyos to create a certain linear effect, and if we suddenly said "sorry, we're gonna ignore the repeats when determining the duration or where things get appended", it could really mess them up and it makes a rather odd exception in the behavior. We could, as you suggested, ONLY ignore infinite repeats (and I see why you'd suggest that), but that's still an exception that might be odd to some people, and more importantly it creates a performance bottleneck because the timeline would have to analyze every child, look for which ones repeat, treat them in a special way and recalculate the duration accordingly. And if you poll the timeline's duration(), what should it spit back? The "real" duration or the synthetic one we're calculating without infinite repeats? 


So changing the behavior as you suggested would open a whole different can of worms. 


If you really want that behavior, you could certainly create your own method that stores a variable that represents the "end" of the timeline without repeats. Kinda like:

var end = 0;
var tl = new TimelineLite();
function add(tween) {
    end += tween.duration(); //remember, duration doesn't include repeats
    tl.add(tween, end);

Then you could just call add( TweenMax.to(...) )...


There are lots of options, actually - hopefully this gets you pointed in the right direction (along with Jamie's other 3 suggestions)

  • Like 3
Link to comment
Share on other sites

OK didn't know about the callback on "add" and I think the other 2 would work for me as well.

I realize about backward compatibility and all that, and wouldn't want to make a huge change like that without thinking out the consequences of course. On the other hand, though, it's hard to envision a situation when people would be depending on this behavior as any timeline with it's duration (forget I said "playhead" ... got the terms confused) pushed out to infinity would be pretty much unusable for any further append operations.


Also if infinite animations didn't affect duration from the start, then there shouldn't be any recalculation necessary, no?

Link to comment
Share on other sites

The only way we could realistically do this to alter the behavior of totalDuration() across the platform so that anything that has a repeat of -1 would ignore all repeats when calculating its own totalDuration. In other words, let's say you've got a 1-second TweenMax that has a repeat of 2, that means its totalDuration() is 3 but if you change the repeat to -1, totalDuration would suddenly get shorter, to 1. 


I can see how in some situations this would be helpful but I wonder if it's confuse people too. Like what if someone had conditional logic that analyzes tweens like:

if (myTween.totalDuration() > 30) {
    // do stuff

Then infinitely repeated tweens may evaluate as false there, and it'd baffle the user. See what I mean? Then again, I can certainly see how in many situations (maybe even the majority), it would be nice to have the "ignore infinite repeats when calculating totalDuration()" behavior. 


Feel free [anyone] to chime in with your opinions here. 

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