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