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

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.

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

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

I went across Flip during my research but after trying it I though this wasn't it. But after studying the case more in depth it's exactly what I need to do but slightly different. Thank you so much for your answer!

Hello, I've been struggling for the last few days to animate a photo gallery. The project is originally on react but a recreate a js example on codepen. I hope it will help to understand. on one page of my projects, I made a horizontal scroll images gallery. When the user clicks on one image I want the image to take up all space of the screen keeping the same ratio. So I created a timeline that animate out the column and reduce the width to 0. Then I animate the image to take the width of the container. As you can see in the example there is a delay before the image width increase. I'd like the animation to be smooth and I find this delay not aesthetic at all. I try many things: changing the position marker of the tweens. change to different css style, and change the order of the tweens. but nothing really works Could you show me what I'm doing wrong ? Thank you in advance for your help :)