Hamburger Button animation TransformOrigin

[t1B0Y]

Hi everyone,

I'm designing a navigation button for my website but I've been struggling for hours on something I believe is really simple.

I have a hamburger button that I want to animate (rotate 90 degrees) on hover and transform into a cross on click.

My strategy is to create two timelines one for hover and one for the user click. The first timeline works perfectly. 

The second one starts well, but when it comes to scaling the two lines used for the cross I can't manage to center the line no matter how I change the transformOrigin.

Could someone help me fix this problem?

Thanks a lot

 

See the Pen jOXrKRW by t1b0y (@t1b0y) on CodePen

[mvaneijgen]

Hi @t1B0Y

 

I don't have time to debug your version at the moment, but I've spend some time in the past creating my own menu animation. There are several different animations that are commented out that you can easily swap out. 

 

What I still remember from this version is that all my lines are in the middle of the button (all on top of each other) this makes it much easier to to rotate them, you can see this on page load that they animate in. So if I want to rotate them like you want I just animate them back to their y 0 position and rotate from there. 

 

Sorry that I can't be of more help, but hope it helps and happy tweening! 

 

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

[t1B0Y]

Hello mvaneijgen, 

Don't be sorry it's already nice that you took the time to answer my post. Your menu works perfectly and I also thought about that for my backup plan in case I can't solve my issue.

My button would work well if I rotate from a center origin like you did on your menu.

But I'm so frustrated that I can't make it scale from the extremity of the line and that I don't understand why the line is decentering when I change the origin. 

So I just would like to understand why it is behaving like that.

I guess I'll need more time on it and it will eventually work.

But I'll definitely use your animation for my button if I can't find any fix
 

[Rodrigo]

Hi,

 

As a side note to Mitchel's excellent suggestion and example would be to properly cleanup your GSAP instances in the cleanup phase of the React effect hooks. While right now you are using GSAP Context to create your GSAP instances, you're not reverting them in the cleanup part of the hook. Creating your instances inside a GSAP Context is not enough to prevent certain issues that most commonly arise with React's Strict Mode.

 

I strongly recommend you to take a look at the resources in this page to learn more:

 

This is the proper way to use GSAP Context in the effect hooks:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {}, scope);
  return () => ctx.revert(); // <- easy cleanup!
}, []);

Hopefully this helps.

Happy Tweening!

[t1B0Y]

Hi @Rodrigo,

I did not realize that cleaning the context in a useEffect was this important this is why I did not do it in the first place. Thank you for the advice, I'll d it from now on.

However, this did not fix my issue.

Thank you for your help, I think I'm gonna use a different animation as @mvaneijgensuggested. 

[mvaneijgen]

The way you center the elements causes the transform origin offset. translate(-50%, -50%) makes the transform origin to be offset by that amount. So if you want to use this the transform origin should be "0 50%"

 

See the Pen bGOeXMv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Here is a version that uses CSS grid to center the elements, so you don't need to make your elements absolute with an offset of 50% and then translate them back again to -50%. Not really a GSAP issue, but here you go. Hope it helps and happy tweening! 

 

See the Pen JjwKgmY?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[t1B0Y]

Thank you so much @mvaneijgen ! 

I knew it was a small detail and it was driving me crazy. 

your solution works perfectly and everything makes sense now