Menu Opening and Closing Buggy

[Ken Flores]

Hello friends! 

 

I have been trying to make this code work, but I am unable to do it without a bug that makes the menu button have to click twice, and when it does work on reverse,  I expected the animation to have the same run-through of the text disappearing first.. 

 

Could you guys point out what i'm doing wrong here? Thank you so much in advance!

See the Pen eYjmajg by kenneth-brian-flores (@kenneth-brian-flores) on CodePen

[mvaneijgen]

Hi @Radiant Church welcome to the forum!

 

In your click handler, you check if the timeline is reversed. However, the timeline is not reversed, so the first time you click, the timeline will attempt to run in reverse, but it will do nothing because it is already at the beginning and there is nothing to reverse. If you set the reversed property of the timeline to true, then your if statement will be true and the timeline will play the first time you click. I've added console logs to the click handler to help you understand what it is doing.

 

Before I'd find your issue I took a look at your CSS and found a lot of transition: all; properties. You almost never want to transition all. Beside that it isn't performant it will trow off GSAP because GSAP will animate something and then the browses see "ow you want to animate that, let me help" by applying a transition to it, so only transition the elements you want to transition and be sure to NOT animate that same property with GSAP or you're going to have a bad time. 

 

Transitioning specific properties in CSS (be sure to don't mix GSAP and CSS transitions

transition: transform, opacity;
transition-duration: 300ms;
transition-timing-function: ease;

I've also add some comments to your code. You don't need to wrap every property in a css: {} object, you can just target it directly. There are also more performant properties to animate instead of left: top: right: bottom: use x: or y: (or xPercent and yPercent, if you want to animate in percentages). Hope it helps and happy tweening! 

 

See the Pen oNMXNeV?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Ken Flores]

@mvaneijgen Wow thanks! This is exactly what I needed! So much knowledge! I've learned a lot from your explanation! So excited to have an awesome community like you guys!