Kapaluika Posted September 29, 2020 Share Posted September 29, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 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: Link to comment Share on other sites More sharing options...
Kapaluika Posted September 29, 2020 Author Share Posted September 29, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 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. Link to comment Share on other sites More sharing options...
Kapaluika Posted September 29, 2020 Author Share Posted September 29, 2020 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 3yf2DyiK2i.mp4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 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 2 Link to comment Share on other sites More sharing options...
Kapaluika Posted September 30, 2020 Author Share Posted September 30, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 30, 2020 Share Posted September 30, 2020 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: 1 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