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!

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!!