Jump to content
Search Community

Button Hover Toggle

Pav test
Moderator Tag

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



First off, let me offer a word of thanks for the Greensock line as it has provided “noobies” like me with a helpful insight into the world of Flash and Java-based animation.


Now as to my own little difficulty, I have created a demo for my issue which may be found at:

See the Pen IpLxF by Xenon1967 (@Xenon1967) on CodePen

which demonstrates a very basic button animation that currently functions as follows:

  • Initial mouseoff: Graphics appear at 50% opacity
  • Initial mouseover state: Graphics fade to 100% opacity
  • Initial click: Animation scheme is invoked
  • Mouseout: Animation scheme carries on with graphics at 100% opacity
  • Secondary click: Animation ceases and graphics fade back to 50% opacity

Now, all of this functionality functions as expected and desired to this point. However, when I mouseover and then mouseout over the button after the secondary click, the graphics fade in to 100% as expected, but do not fade out to 50% as they do with the initial mouseout. I sense that I am close to a solution for this anomalie, but just cannot seem to figure it out.


Any assistance you might be able to offer me with regards to the code would be much appreciated! 


- Pav

Link to comment
Share on other sites

hmm, looking at the console shows you have some errors.

Adding a simple console.log("mouseleave") to your mouseleave handler shows that it wasn't firing AFTER the second click... so this seems like its much more of a logic / jQuery issue than anything to do with the GSAP code.


Also, I'm guessing that doing this:




and not re-adding the mouseleave is probably the root cause.


We really can't focus a lot of time on debugging complex jQuery interactions, but I think if instead of adding and removing mouse event handlers and just running some logic in mouseenter and mouseleave might get you closer to what you want.


Bascally ONLY do the fade in and out on enter/leave if the object isn't active:


function mouseenter(){
TweenMax.allTo([".scheme1M", ".scheme1MOTO"], 0.2, {alpha:1});
function mouseleave(){
TweenMax.allTo([".scheme1M", ".scheme1MOTO"], 0.2, {alpha:.5});}



This appears to run without errors.

  • Like 1
Link to comment
Share on other sites

yep i was seeing the same JS error after i clicked, and then re-entered with mousenter:

TypeError: f.handler.apply is not a function
Line 3

Looks like you are unbinding the mouseenter and mouseleave in one of your if statements inside your click event handler


Hello Carl, I was looking at his code as well, and was wondering what the allTo() method does? I could not find a reference to it in the Docs.

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,


allTo() is the old version of staggerTo() from the ActionScript v11 days. 

allTo() is officially deprecated but it currently is an alias for staggerTo() to make the migration process easier for Flash devs.


Previously, only TweenMax.allTo() could handle tweening multiple targets with a single tween.

In v12 we switched to allowing the target of a tween to be an Array of targets, so in TweenLite it is now fine to do

TweenLite.to([obj1, obj2], 1, {x:200});

Which makes a method called allTo() seem obsolete. However, the staggering aspects of the allTo() methods are still necessary, and now specifically handled by the staggerTo(), staggerFrom() and staggerFromTo() methods.

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.
  • Create New...