Jump to content
Search Community

Multiple interactions and timelines for button interactions

A H test
Moderator Tag

Recommended Posts

Hello!

I’ve spent a long time combing the forums looking for an answer but haven’t been able to find something that I think fits the problem.  

I have a navbar with a custom hamburger button that has some animation for hover and click.  I am having trouble understanding having two timelines that must operate in sequence.  

 

Some detail:
1.    When the user tabs to the button or hovers, the bars should slide to a full-width hamburger.
2.    When the user clicks or hits enter/space to activate the button, it should finish the hover animation regardless of its position and then activate the click timeline which slides out a nav (in the simple demo it just changes a box color and text for ease).  
3.    When the user clicks the X, it should reverse the animation.
4.    When the user mouses out or blurs, the hover should reverse.


I feel I am close but continue to get odd results.  Hover animations firing when exiting but only going halfway, quick bounces on mouseout, etc.

I know with the version upgrade to 3, class manipulation was removed, but I was trying to use .set() or functions to manipulate classes. Is there a smarter way to do these kind of multiple interactions? Conditionals in lifecycle methods like onComplete()?  Should they be one timeline that only goes halfway on hover and then continues on click?   .progress()? 

 

Any assistance would be great.  Thank you!
 

See the Pen OJQoVgy by ahdrum87 (@ahdrum87) on CodePen

Link to comment
Share on other sites

I don't have time at the moment to dig into it deeply, but I think the main problem here is that you're thinking in terms of very linear pre-baked timelines but you actually want your interactions to be dynamic. For example, what if the user hovers over/off/over/off or clicks multiple times quickly. See the issue? 

 

In my opinion, it's much better to leverage the dynamic nature of GSAP to your advantage by just creating those animations on-the-fly. Think of it more like calling a function to make it go to a particular state, like expand() and contract() or whatever. Inside those, you just create a new tween/timeline to make it go there, and you may need to kill() old in-progress tweens/timelines affecting the same element(s). That way, it'll just pick up from whatever state the element is in at that point (even if it's mid-tween). 

 

No need to pre-bake multiple timelines and try to jump between them, pause() the other one, etc. 

 

Does that help? 

 

If you still need some assistance, I'd encourage you to isolate the problem as much as you can by just using a couple of colored <div> element or something so that you can get a grasp on the basic concepts and clearly illustrate where you're struggling. Slowly build it up to be closer to your final project and when it breaks, you'll know where the issue is. 

  • Like 1
Link to comment
Share on other sites

I don't find this answer super helpful.  The problem seems like something people would encounter all the time.  Using the dynamic nature of GSAP doesn't stop the issues with clicking and hovering on and off.  Wouldn't that exacerbate it?  If the hover animation is halfway done and you call kill(), wouldn't it return to the initial state? 

 

Wouldn't making the timelines dynamic in the functions like expand(), collapse() and cross() lose any concept of state with the animation meaning if it's expanded, made into an X, in-motion in or out, etc?  It feels like they are isolated as much as I can to still illustrate the issue occurring. 

 

Thanks

Link to comment
Share on other sites

33 minutes ago, A. Helton said:

If the hover animation is halfway done and you call kill(), wouldn't it return to the initial state? 

Nope. It just stops tweening it. 

 

34 minutes ago, A. Helton said:

Wouldn't making the timelines dynamic in the functions like expand(), collapse() and cross() lose any concept of state with the animation meaning if it's expanded, made into an X, in-motion in or out, etc?

No, I think you may be misunderstanding. It might help to think in terms of where the state is going because when you introduce animation, there's suddenly infinite "states" in a sense because there's the "before" state, the "after" state, and all the inbetween states as it transitions from one to the other. You've technically got 3 states, right?:

  1. off
  2. hovered
  3. open

And you created a timeline to go from 1 -> 2 and then a whole different timeline to go from 2 -> 3, right? What if you want to go from 1.5 to 3? Or 2.7 to 1? See the problem? It's fundamental logic issue. 

 

Don't worry, it's totally fixable. 

 

In your demo, I think the issue was that you didn't make sure that the OTHER timeline was paused before you play the alternate one, so they might both be running, fighting for control of the same properties of the same elements. So you could just fix that, or you could take a different, more dynamic approach like this: 

 

See the Pen zYRmdZG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Either one is fine, really. It just depends on the look you want and what clicks better with your brain. 

 

I hope that helps more. 

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