branching timelines

[jsweriduk]

I know you have the ability to nest timelines within other  timelines.

 

What I'm curious about is if you can utilize this to have certain timelines play based on a logic-based tree.  An example being a neat hover effect on a button that will animate differently depending on the state of the button.

 

So, if you hover over the button, but take the mouse off the button before the animation completes, the animation will just reverse and put the button back in its original state.

 

But, if you take the mouse off the button after the animation completes, then you have a nested timeline play, which animates the button back to it's original state in a different way than reversing it.  

 

To add more complication, lets say you click on the button and want it to have it animate into something different.  Like a couple of lines turning into an X.  The purpose of this being to show that a menu/lightbox has been opened.  Then when you click on it again a totally new animation plays that reverts the button back to it's original state.

 

Hopefully I was clear about this, it is a little confusing.  Thanks for any help.  I'd be happy to give a codepen a shot, but a few responses to put me in the right direction would be very beneficial first.

[PointC]

Hi jsweriduk 

 

Welcome to the GreenSock forums.

 

You can have different things happen to your button for mouseenter, mouseleave, mousedown and mouseup. I think you'd usually want to stay with a reverse of the timeline for your hover in/out events. Here's an example I made as an answer to another question, but it shows the basics for you.

 

See the Pen WrjzOa by PointC (@PointC) on CodePen

 

Regarding lines turning to an x, you'll find loads of examples on CodePen. Here's an example of that I used for another forum question:

 

See the Pen XKbEBQ by PointC (@PointC) on CodePen

 

If I understand the last part of your question, I'd recommend staying clear of having an x trigger a new animation unless it's very clear to the user. I think most users that saw a set of lines turn into an x would assume that clicking the x would close whatever they just opened. It would probably be better to have a new button appear when that new panel or image has opened. Just my 2 cents worth on that from a user experience point of view.

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

[Carl]

Like Craig mentioned things can get messy fast if you want to somehow seamlessly animate between different states while the user is clicking and hovering quickly.

 

As for the first part of your question:

 

So, if you hover over the button, but take the mouse off the button before the animation completes, the animation will just reverse and put the button back in its original state.

 

But, if you take the mouse off the button after the animation completes, then you have a nested timeline play, which animates the button back to it's original state in a different way than reversing it.  

 

 

 

I believe the following code and demo will handle that without a nested timeline

 

var tl = new TimelineMax({paused:true});




tl.to(".green", 1, {width:300, ease:Linear.easeNone})
  .set(".green", {backgroundColor:"red"}, "stopTime") // intro animation ends here
  .addPause()
  .to(".green", 0.2, {opacity:0})
  .fromTo(".green", 0.2, {width:0, opacity:0, backgroundColor:"purple"}, {width:50, opacity:1, backgroundColor:"#6fb936", immediateRender:false})


var stopTime = tl.getLabelTime("stopTime"); // time that intro animation ends




$("#hover").mouseenter(function(){
  // on mouseenter if the playhead is before the stop time then play
  if(tl.time() < stopTime){
    tl.play();
  // if the timeline has completed then restart it
  } else if (tl.progress() == 1) {
    tl.restart();
  }
})


$("#hover").mouseleave(function(){
  //on mouseleave reverse direction IF the playhead is before the stop time
  if(tl.time() < stopTime){
    tl.reverse();
  //on mouseleave play through the fade out if playhead is at or past stopTime
  } else {
    tl.play();
  }
})

http://codepen.io/GreenSock/pen/qqygvj?editors=0010

 

Take a stab at handling the different animation for click. I imagine its possible but could take some work especially if you want to prevent clicking during certain parts of the animation. 

[PointC]

Very nice Carl. That's why you wear the cape.

[jsweriduk]

Carl, you are a godsend.  I am a little unfamiliar with labels, and that seems to be the missing piece to the puzzle