Jump to content
GreenSock

Mukhriddin

Menu hamburger doesn't work

Go to solution Solved by GreenSock,

Recommended Posts

I noticed several problems:

  1. You forgot to pass an empty dependency Array to your useEffect(), meaning it will re-run every time there's a render.
  2. You set your timeline to be reversed initially and paused. So the playhead starts at zero and then when you added animations to the timeline, nothing happened because not only was it paused (playhead frozen), it was also reversed, so the playhead has nowhere to go in reverse anyway. 
  3. You had CSS transitions applied. NEVER apply CSS transitions to the same things that GSAP is controlling. 
  4. You didn't have any cleanup function returned from your useEffect(). Keep in mind that in React 18, the useEffect() gets called TWICE in strict mode which is very confusing/annoying. It makes it important to clean things up, though, so you're not creating multiple animations that are attempting to control the same thing at the same time. 

I assume you were looking for something more like this:

https://codesandbox.io/s/gallant-hamilton-q3z0w9?file=/src/App.js

Link to comment
Share on other sites

photo_2022-07-05_10-08-14.thumb.jpg.524f579e02dc08b53f06375f0aaffeb3.jpg

12 hours ago, GreenSock said:

I noticed several problems:

  1. You forgot to pass an empty dependency Array to your useEffect(), meaning it will re-run every time there's a render.
  2. You set your timeline to be reversed initially and paused. So the playhead starts at zero and then when you added animations to the timeline, nothing happened because not only was it paused (playhead frozen), it was also reversed, so the playhead has nowhere to go in reverse anyway. 
  3. You had CSS transitions applied. NEVER apply CSS transitions to the same things that GSAP is controlling. 
  4. You didn't have any cleanup function returned from your useEffect(). Keep in mind that in React 18, the useEffect() gets called TWICE in strict mode which is very confusing/annoying. It makes it important to clean things up, though, so you're not creating multiple animations that are attempting to control the same thing at the same time. 

I assume you were looking for something more like this:

https://codesandbox.io/s/gallant-hamilton-q3z0w9?file=/src/App.js

Yes, I meant something like this. But if you see, it starts as cross icon, not hamburger by default. 
And also, in Safari, cross lines don't seem to settle perfectly(1st image is on Chrome, the second is on Safari). P.s: everything is ok with Chrome  as you see)

ee.thumb.jpg.a887b8b6ad0877fd79a990a60037e434.jpg

photo_2022-07-05_10-08-14.thumb.jpg.524f579e02dc08b53f06375f0aaffeb3.jpg

Link to comment
Share on other sites

24 minutes ago, Mukhriddin said:

Yes, I meant something like this. But if you see, it starts as cross icon, not hamburger by default. 

Then just pause it initially and reverse and then resume() when toggling:

https://codesandbox.io/s/gallant-hamilton-q3z0w9?file=/src/App.js

 

As for the Safari rendering, that's unrelated to GSAP. I don't notice anything odd on my end. You can try setting will-change: transform to see if it helps. When you inspect in Dev Tools, the values are all correct, right? They are for me. 

  • Like 1
Link to comment
Share on other sites

13 minutes ago, GreenSock said:

Then just pause it initially and reverse and then resume() when toggling:

https://codesandbox.io/s/gallant-hamilton-q3z0w9?file=/src/App.js

 

As for the Safari rendering, that's unrelated to GSAP. I don't notice anything odd on my end. You can try setting will-change: transform to see if it helps. When you inspect in Dev Tools, the values are all correct, right? They are for me. 

The same output with  willChange: 'transform'. Yes, in Dev Tools (Chrome) everything is ok. But when I check it via my mobile (Safari), cross lines are somehow not straight. As you see images above

Link to comment
Share on other sites

  • Solution

Then you might want to switch to using SVG. 

  • Like 1
Link to comment
Share on other sites

Thanks a lot, Jack! I'd appreciate your help!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×