Stop Hover animation after Click

[belmuseri]

Hi! I'm pretty new with Gsap so I will appreciate any help  

 

I'm traying to stop the hover animation when I click the button but I can't realize how to do it...  

See the Pen jJmJqr by BelMus (@BelMus) on CodePen

[PointC]

It depends on what you're after here. 

 

If you want to get rid of the hover animation, you can .kill() or .clear() that timeline on click. 

 

If you want to turn off the hover while the menu is open, but want to use it again when the menu is closed, you can remove the listeners while the menu is open. Make sense?

 

Just FYI — you have an error in your pen on line 5:

 white.reversed() ? white.play() : white.reverse();

 

There is nothing declared with that name. Happy tweening.

[Jonathan]

Hi @belmuseri and Welcome to the GreenSock Forum.

 

If you need to make it so once the 3 lines icon is clicked and no longer clickable. Just add an active class and check for that active class. If the active class exists, return false on the event handler.

 

document.getElementById('navbar-toggle').onclick = function(){
    
	if(menubcg .classList.contains("active")){
		// do nothing
		return false;
	} else {
		menubcg.classList.add("active");
		MenuIcon.reversed() ? MenuIcon.play() : MenuIcon.reverse();
	}
};

 

This is how I would do it, no need to use kill(), since the animation will not be triggered by the event. You could also remove the event listener like @PointC advised which is another option. But there are many ways to do this.

 

See the Pen eXEjwG?editors=0110 by jonathan (@jonathan) on CodePen

 

Happy Tweening

[belmuseri]

Hi! thank you guys! I have been reading and reading many helpful posts and I found a way to achieve what I was trying to do using functions.

What I was trying to do:
When I hover the first animation begins. Then, when I click the second animation begins and the first hover animation stop so I can create a new hover animation.

 

See the Pen VRzNpO?editors=1010 by BelMus (@BelMus) on CodePen