Play timeline from label to label, then pause?

[will]

This sounds easy but I think I'm just simply messing it up.

 

I want to play from say label "01" to label "02" on a mouse over event then pause once it's at "02".

 

Then on a mouse out event I want it to play "02" back to "01" then pause.

 

 

I'm trying to use: timeline.tweenFromTo("00","01")

but it continues to run.

 

Please tell/show me the correct way to do this. I'm trying to make a navigation bar that fades in and out when moused over (And a lot more)

 

 

 

 

Thanks!

[Rodrigo]

Hi and welcome to the forums,
 
You're right on using the tweenFromTo() method, the only thing missing is the callback to pause the timeline, something like this:

var timeline = new TimelineMax({paused:true}),
    div1 = $("div#div1");
timeline
    .to(div1, 1, {autoAlpha:.2}, '00')
    .to(div1, 1, {scale:2}, '01');
                     
//And now you tween to the specific label
div1.mouseenter(function()
{
    timeline.tweenFromTo("00","01");
});

div1.mouseleave(function()
{
    timeline.tweenFromTo("01","00");
});

You can see it working here:
http://jsfiddle.net/rhernando/ncX7j/1/

 

Edit:

You should also consider use the tweenTo() method because using tweenFromTo() generates an immediate render, meaning if you leave the mouse before the tween is complete it goes immediately to the label "01" and then goes to the label "00", and if you put the mouse over before the reverse is complete it goes to the label "01" and then reverse to the label "00".

 

Also in order to pause the timeline there is no need for callbacks, the timeline goes to the point indicated and no further.

 

I updated the fiddle and the code.

 

Here's the fiddle using the tweenTo() method:

 

http://jsfiddle.net/rhernando/ncX7j/2/

 

Sorry for the initial mistake.

Hope this helps,
Cheers,
Rodrigo.

[mystrdat]

Sorry for reviving an old topic, but this project is just phenomenal. Every useful feature you need already exists. Thanks!