Jump to content


Stop Hover animation after Click

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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 {
		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 :)

  • Like 4
Link to comment
Share on other sites

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





  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.