Jump to content
GreenSock

will

Play timeline from label to label, then pause?

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

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!

Link to comment
Share on other sites

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.

  • Like 1
  • Thanks 2
Link to comment
Share on other sites

  • 5 years later...

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

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