I can't reverse my menu animation

[clhomme]

Hello everyone! Sorry to bother you again.

 

So, I made an animation for my menu opening and closing. It works fine when it opens, but my issue is, it doesn't work when I close it. I want to have the same animation play but in the opposite direction. I tried using the reverse() method, and its cousin reversed() (the one you see in my codepen, but it didn't work. I tried creating another animation with the opposite x value, but it didn't work either.

 

Thank you to anyone willing to help me ^^

See the Pen WNgWmzY by Dhandelyon (@Dhandelyon) on CodePen

[Rodrigo]

Hi,

 

Your <nav> element is also being animated at the same time as the links, but using CSS animations. Maybe that's causing the problem. I removed that part of your CSS and it seems to work as expected:

See the Pen abaxxJy by GreenSock (@GreenSock) on CodePen

 

Unfortunately we don't have the time resources to fix every part of your example. But if you want to animate the entire <nav> tag as well as the links, I'd suggest you to do that with GSAP as well, since managing GSAP and CSS animations could become quite a pickle.

 

Hopefully this helps.

Happy Tweening!

[clhomme]

Hi! Thank you it works very well just as it is.