Jump to content
Search Community

TimeLine.tweenFromTo and repeat

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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(); 
}  

Link to comment
Share on other sites

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.

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