[Reverse and return elements to their original position]

20 hours ago, ZachSaucier said:

Ah, I see. So the case is when someone clicks and moves away from the button before the transition has stopped. Now I get what you're saying. Your issue is logical. The unhover function fires before the animation completes so the active class is still applied.

 

I'd structure things differently. Instead of using new animations each time, just use control methods on ones that you create beforehand. That not only fixes logical issues like the one you're asking about but it's also more performant. You do it for the click animation but you don't for the hover animation. I'd do it for both.

 

Here's how I'd do it. I added comments so it's hopefully easier to follow. No jQuery necessary!

 

 

Yes, indeed this is what I wanted.
Thanks so much, your code is amazing.

But I don't understand one detail:

.to('.line01', {x: -9, stroke:'#000000'}, '<')

< - what is it?
And where can I read about it?

[Reverse and return elements to their original position]

14 minutes ago, ZachSaucier said:

I think I did understand you. What I don't understand is why you want this to happen. The unhovered state has them at 0,0. The hover state puts them at 9,-9. So when the button is clicked a second time and the button is still hovered logically it makes sense that they would be at 9,-9 not 0,0 like you are requesting. But your demo already does that. I'm not understanding why you want it to go to the unhovered state when it is still hovered.

Perhaps this is due to the fact that I partially switched to version 3.

Since I started on an early version and there was no such problem.
 

I recorded a small video of what result I want to achieve

[Reverse and return elements to their original position]

58 minutes ago, ZachSaucier said:

Hey Kapaluika. To me your button looks great! You have a hover animation and a click animation. Why would you want it to go back to the un-hovered state if the button is still being hovered? That seems counter-intuitive to me. Or perhaps I'm misunderstanding what you're asking.

 

Side note: We highly recommend using all GSAP 3 formatting so you can make use of features like GSAP's defaults functionality. More on that here:

 

Thank you ZachSaucier for your answer, you are the one who always answers questions:)

I think you misunderstood me.
 

The problem is that after clicking the button again(namely, when it turns from a cross into two lines), they are in the middle of each other in the position:

.to('.line02',0.4,{x: 9, stroke:'#000000'},0)
.to('.line01',0.4,{x: -9, stroke:'#000000'},0)

But I need them to return to the position:

.to('.line02',0.4,{x: 0, stroke:'#000000'},0)
.to('.line01',0.4,{x: 0, stroke:'#000000'},0)

I do not know how to do this, I will be happy to wait for your response
 

[Reverse and return elements to their original position]

Hi everyone, I ran into a problem.

I made a small click-and-hover animation.

When you hover over the hamburger, the two lines become in the middle.
When you click on a hamburger, it turns into a cross.

When you click again, the reverse occurs, but the hamburger does not become the "set" value but moves to the last position when hovering.

How to make two lines go to the original position, which is specified in "set".

Please don't throw stones, I'm still a novice.

See the Pen rNegBpw by nikita-sidorenko (@nikita-sidorenko) on CodePen

[How to make animation happen when you click?]

I created a new pen on 

See the Pen ZEQPGMO by nikita-sidorenko (@nikita-sidorenko) on CodePen

I showed there how animation should be, but the code is very bad and it can't be used together with mouseenter and mouseleave.

[How to make animation happen when you click?]

I want these lines to move to the center when the button is clicked, but I don't know how to do it:(

[How to make animation happen when you click?]

I'm new to jQuery and JavaScript, don't judge strictly. I wrote a small script to animate the display of tabs. And I decided to add animation when hovering and clicking on the button itself. But I can't figure out how to do it. Made an animation when hovering through mouseenter and mouseleave. I want these lines to move to the center of the word when you click them, and when you click another button in active mode, they leave the old one and appear on the new one.

I uploaded the full code to CodePen

See the Pen abdMzPO by nikita-sidorenko (@nikita-sidorenko) on CodePen