Reverse and return elements to their original position

[Kapaluika]

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

[ZachSaucier]

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:

 

[Kapaluika]

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
 

[ZachSaucier]

8 minutes ago, Kapaluika said:

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 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.

[Kapaluika]

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

[ZachSaucier]

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!

See the Pen yLOWOBy?editors=0010 by GreenSock (@GreenSock) on CodePen

[Kapaluika]

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?

[ZachSaucier]

1 hour ago, Kapaluika said:

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

It means "start at the same time as the previous tween in the timeline." Learn more about it here: