Multi-stage Menu Animation-Works only once

[c_larindesigns]

I have a multi-stage menu animation that I've been tinkering on for a while now. I have finally got it to work, but it only works once all the way through and then it breaks when you try to revisit the menu a second time.

 

For the first part, the chopsticks grab the fish on hover. If you leave the sushi menu without clicking, the animation reverses. The second part happens on click. The fish is consumed as the menu expands and the chopsticks cross to form the closing button. The third part is a second click that closes the menu and reverts the sushi menu to the initial position WITHOUT reversing the previous animation completely.

 

Again, it works for the first go, but anytime after, it doesn't perform the second and third parts and the first part gets wonky. I created a Codepen, but it didn't seem to want to work there like it does live. You can see the entire site and my menu animation at http://sushi503.com.

 

I have tried doing a single timeline, a master timeline with child timelines and finally separate timelines, which has been the most successful. Thanks in advance!!

See the Pen KmxBmz by c_larin_designs (@c_larin_designs) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo, but I just can't wrap my head around all the conditional statements, adding and removing of classes and playing and reversing of timelines with un-intuitive names like fresh_fish, consume_fish and grab_fish. I understand that makes some sense to you in the real project, but as someone looking at this code for the first time it would be much more helpful to see a simpler demo with clear names like mouseover_animation, mouseout_animation, open_menu, close_menu etc.

 

Since the CodePen is behaving quite differently from the live site it makes it difficult to troubleshoot it effectively.

 

Unfortunately, this seems to be more of a logic problem in your code than a clear GSAP issue that we can help with within a reasonable amount of time.

 

If you can simplify things further and get it to a point where 90% of the core functionality is working, perhaps we can jump in and give some ideas on how to fix the last 10%. Also, with all those conditional blocks it helps to add some console.log() statements so we know which blocks are firing and when.

 

One thing that did jump out as a bit odd (and probably a mistake from copying and pasting code) was how you are using a click event listener to add another click eventListener:

sushi_menu.addEventListener('click', function(e){
    e.stopPropagation();
    
sushi_menu.addEventListener('click', function(event){
        event.stopPropagation();
    });

 

 

 

[PointC]

Hi @c_larindesigns

 

Welcome to the forum.

 

As @Carl mentioned, there is a whole lot going on with the code so it's hard for us to troubleshoot. A reduced demo would be most helpful. That being said, I took a quick look at the code and I see some timelines getting played and then reversed, but others only look like they get played. You mentioned things look right the first time, but don't play after that. I'm wondering if you're trying to play() a timeline that has already been played? Have you tried something like restart() or play(0)? I'm just guessing here, but it would be easy for you to try it.

 

Happy tweening.

[OSUblake]

Here's a menu I helped somebody out with last week. It's different than yours, but may give you an idea of how to structure things. When it comes to making interactive stuff, here's what I would recommend.

• Don't bother trying to make a master timeline as it probably won't work correctly. Use separate animations.
• Break your code down into distinct objects or functions. For jQuery, using .map() works great.
• Toggling/checking for CSS classes is slow and pointless if using objects.
• Sibling objects should not control each other. A parent object or function should do this. In the demo, notice how the click events are handled by calling a parent function, onSectionClick, which figures out what animations should play and be reversed.

See the Pen PmQqZP?editors=0010 by osublake (@osublake) on CodePen

 

 

 

[c_larindesigns]

Thank you all for your input! It was as simple as play(0). Thank you, PointC. It is now working beautifully. I also fixed the issue of jumpy hover effects by targeting an <a> I wrapped around it. Now just to smooth out the animation.

 

OSUBlake, I'd love to learn more about map() and objects. I'm still relatively new with the behavioral side of coding and I didn't understand how they would help me on this point, but that's probably because I'm not entirely grasping it. I looked at the CodePen you provided and I saw there were multiple buttons whereas I only had the one. If you can elaborate or point me to more info about these concepts, I would love to learn more.

 

Thanks everyone!