TimeLine.tweenFromTo and repeat

[caffrey75 2 Likes (Newbie)]

Hi there,

 

Still loving GSAP I was wondering if it's possible to command a timeline to tweenFromTo one frame to another and repeat itself. I can get all the onStart, onComplete etc to fire out callbacks, but if I stick a repeat: x in there it doesn't work.

 

I've been playing with this engine for so long now, I feel like I should know this but experimenting hasn't produced anything.

[Carl 9,066 Likes (Superhero)]

Hi,

 

Glad to hear that you have been enjoying your time with GSAP.

 

I'm a little confused by what you mean by 'frame' when I hear frame I think of a Flash timeline. Since this is the javascript forum I don't know what 'frame' relates to. I could easily be missing something or perhaps you are referring to Flash. Are you trying to tween to a label?

 

Either way, I would love to help you with this problem.

 

Can please clarity your question or perhaps show a very small snippet of code that will illustrate what it is you are trying to do?

 

Thanks

 

-Carl

[caffrey75 2 Likes (Newbie)]

Hehe, sorry Carl - old habits die hard, I've spent too many years working in Flash!

 

Sorry - I meant label.

 

I can't wait to show off the project I'm currently working on to you guys, the foundation is TimeLineMax and TweenMax etc, and I've really tried to make the most of all the awesome features (although I'm sure there are things that I could do better or streamline more etc)

 

The question I had relates to a timeline which is made up as something similar below:

 

$(this).data("mainTL", new TimelineMax({paused: true});
myTL = $(this).data("mainTL");

myTL.insert("in_start");

myTL.insert(TweenMax (etc etc), "in_start");
myTL.append("out_start");
myTL.insert(TweenMax (etc etc), "out_start");
myTL.append("out_end");

 

This is very simplified, but it's a Timeline that will be used with various DOM objects all of which might have various settings (some might play once, some might loop etc)

 

The question relates to those that loop. For the ones that do not loop the code is quite simple:

 

myTL.tweenFromTo("in_start", "out_end"{onStart: etc, onComplete: etc})

 

For the ones that do loop, I was hoping to be able to do something like:

 

myTL.tweenFromTo("in_start", "out_end"{repeat: xNum})

 

However this does not seem to work and I was wondering if I was simply doing something wrong or misinterpreting how GSAP works etc

 

Thanks in advance

[Carl 9,066 Likes (Superhero)]

Hi caffrey75,

 

Ah, that makes a ton of sense now. Thanks for the super clear explanation.

 

The problem is that when you create a tweenFromTo(), a TweenLite is returned by that method.

TweenLite tweens do not repeat or have a repeat special property. Just so you know, I found myself in a similar situation recently and it took me a little while to figure this out.

 

Since your TweenLite does not repeat, what you can do is put that tween into a TimelineMax that does repeat. There may be a more elegant solution, but for now, check this out:

 

http://jsfiddle.net/geekambassador/EzxCw/

 

 

var loopController = new TimelineMax({repeat:-1});

var tl = new TimelineMax({onComplete:completeH});

tl.insert(TweenLite.to(box, 1, {css:{left:300}}), 'startRight');
tl.insert(TweenLite.to(box, 1, {css:{top:300}}), 'startDown');
tl.insert(TweenLite.to(box, 1, {css:{left:0}}), 'startLeft');


function completeH(){
  $('#console').html('repeat label sequence');
  loopController.append(tl.tweenFromTo('startDown', 'startLeft'));
  loopController.play(); 
}  

[Carl 9,066 Likes (Superhero)]

here is another approach using the same main TimelineMax and labels

 

Generate a TweenMax.fromTo() that uses getLabelTime() to tween the time() value of your TimelineMax:

 

http://jsfiddle.net/geekambassador/eMGsc/

 

    TweenMax.fromTo(tl, 1, {time:tl.getLabelTime('startDown')} ,{time:tl.getLabelTime('startLeft'), repeat:-1});

 

The issue with this approach is that you need to know the duration. In more complex situations you could subtract the time of the start label from the end label to generate the duration.

[caffrey75 2 Likes (Newbie)]

Thanks Carl, really neat couple of approaches there! Really appreciate you taking the time to explain. I'm off right now to put one into practice