Mukhriddin Posted July 4, 2022 Share Posted July 4, 2022 Here is the link to Codesandbox https://codesandbox.io/s/vibrant-banzai-t714sr?file=/src/styles.scss I aimed to implement a hamburger that is turned to cross icon once clicked. But somehow there is an error which I can't find. I'd appreciate your help Link to comment Share on other sites More sharing options...
GreenSock Posted July 4, 2022 Share Posted July 4, 2022 I noticed several problems: You forgot to pass an empty dependency Array to your useEffect(), meaning it will re-run every time there's a render. 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. You had CSS transitions applied. NEVER apply CSS transitions to the same things that GSAP is controlling. 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 More sharing options...
Mukhriddin Posted July 5, 2022 Author Share Posted July 5, 2022 12 hours ago, GreenSock said: I noticed several problems: You forgot to pass an empty dependency Array to your useEffect(), meaning it will re-run every time there's a render. 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. You had CSS transitions applied. NEVER apply CSS transitions to the same things that GSAP is controlling. 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) Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 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. 1 Link to comment Share on other sites More sharing options...
Mukhriddin Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
Solution GreenSock Posted July 5, 2022 Solution Share Posted July 5, 2022 Then you might want to switch to using SVG. 1 Link to comment Share on other sites More sharing options...
Mukhriddin Posted July 5, 2022 Author Share Posted July 5, 2022 Thanks a lot, Jack! I'd appreciate your help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now