Jump to content
Search Community

Mouseover event not reacting

vanwoods 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

Hi!

 

I'm having some trouble with a mouseover event, the code I use isn't responding. I just want my cta_mc to popup when I mouseover.

 

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()
{
	TweenMax.to(this.cta_mc, .3, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut}, "+=.3");
	TweenMax.to(this.cta_mc, .3, {scaleX:1, scaleY:1, ease: Back.easeOut});
}

var tl = new TimelineMax({repeat:0, repeatDelay:3})

TweenLite.defaultEase = Power2.easeOut;

tl.to(this.bg_mc, 1, {delay:.5, alpha:.5})
	.from(this.txt1_mc, 1.5, {y:"+=20", alpha:0}, "-=.5")
	.to(this.txt1_mc, .5, {delay:1, y:"+=10", alpha:0})
	
	.from(this.txt2_mc, 1, {y:"+=20", alpha:0}, "-=.3")
	.from(this.txt2_1_mc, 1, {y:"+=10", alpha:0}, "-=.5")
	.to(this.txt2_1_mc, .5, {delay:1, y:"+=10", alpha:0})
	
	.from(this.txt3_1_mc, 1, {delay:.5, y:"+=10", alpha:0}, "-=.5")
	.to(this.txt3_1_mc, .5, {delay:1, y:"+=10", alpha:0})
	
	.from(this.txt4_1_mc, 1, {delay:.5, y:"+=10", alpha:0}, "-=.5")
	.to(this.txt2_mc, .5, {delay:1, y:"-=25"})
	.to(this.txt4_1_mc, .5, {y:"-=25"}, "-=.5")	
	
	.from(this.cta_mc, 1, {y:"+=25", alpha:0}, "-=.25")
	.to(this.cta_mc, .3, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut}, "+=.3")
	.to(this.cta_mc, .3, {scaleX:1, scaleY:1, ease: Back.easeOut})
	.to(this.cta_mc, .3, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut})
	.to(this.cta_mc, .3, {scaleX:1, scaleY:1, ease: Back.easeOut})

GSDevTools.create();

 

 I also tried this code but i guess it is outdated?

//set scope activation object 
var root = this, tl;

//prevent children of mc from dispatching mouse events 
root.cta_mc.mouseChildren = false;
root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);});
root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);});
root.cta_mc.on("mouseover", function(){
		TweenMax.to(this, 1.25, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut});
	});
root.cta_mc.on("mouseout", function(){
		TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut});
	});

 

Any change somebody seeing what's incorrect?

 

Hope you can help me out. 

 

Thanks in advance. 

 

Link to comment
Share on other sites

It looks like you've got some syntax errors and logic issues: 

 

I'm not quite sure what you meant to do with the "+=.3" at the end here (there is no 4th parameter of a TweenMax.to() call), but maybe you wanted to delay the next tween by .3 in which case you can simply use the delay special property: 

 

TweenMax.to(this.cta_mc, .3, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut});
TweenMax.to(this.cta_mc, .3, {scaleX:1, scaleY:1, ease: Back.easeOut, delay:0.3});

 

Is that what you wanted? 

 

Also note that you can use "scale" as a shortcut to control both scaleX and scaleY if you want to reduce your code a bit. 

 

I wonder if maybe you were thinking about using a TimelineLite or TimelineMax for sequencing - those do have a 4th parameter (the position parameter), but I still don't think you'd need that since I assume your goal is to sequence the tweens back-to-back (which is the default when you don't specify a position parameter), so in that case your code would look like:

var tl = new TimelineLite();
tl.to(this.cta_mc, 0.3, {scale:1.15, ease:Back.easeOut});
tl.to(this.cta_mc, 0.3, {scale:1, ease:Back.easeOut});

 

To learn more about the position parameter for timelines, see https://greensock.com/position-parameter

 

Happy tweening!

Link to comment
Share on other sites

Hi Jack, 

 

Thanks for your input, I cleaned up the code. ;-)

 

Unfortunately my instance of cta_mc still isn't playing the tweenmax on a mouseover.  When i punt in an alert it works as supposed. 

 

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
	alert("Moused over");
}

 

But it won't play when i insert the TweenMax code. 

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()
{
	TweenMax.to(this.cta_mc, .3, {scale:1.15, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .3, {scale:1, ease: Back.easeOut});
}

 

Any change to see what's going wrong?

Link to comment
Share on other sites

No no, that code you've got wouldn't work because your 2nd tween overwrites the first one immediately, and you'd never see any animation because you're telling it to animate to scale:1 right away (but it's already scale:1). Looks like you forgot to add the delay special property to that second tween.

 

In other words, you're saying "animate to scale:1.15 and also scale:1 at exactly the same time." (which can't happen of course)

 

If you're still having problems, it'd be SUPER helpful if you posted an actual example, like as a codepen or something so that we can see what's going on under the hood. 

  • Like 2
Link to comment
Share on other sites

Hi Jack, 

 

Oeps... yes i see what you mean! I changed the code, you can see it here:

 

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()
{
	TweenMax.to(this.cta_mc, .2, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .2, {delay:.2, scaleX:1, scaleY:1, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .2, {delay:.4, scaleX:1.15, scaleY:1.15, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .2, {delay:.6, scaleX:1, scaleY:1, ease: Back.easeOut});
}

 

Somehow the scale shortcut did't seem to work so i changed it back to the first code preview. 

 

So it works fine now, the button pops up and down on mousover. 

 

Thanks for your assistance!

 

Link to comment
Share on other sites

Glad you figured it out. As for the scale shortcut, I'm guessing it's because you're not animating DOM elements, right? Probably an Animate CC project? In that case, yeah, you'd need to use EaselPlugin to get all those other benefits, but it's totally fine to just use scaleX/scaleY since those are direct properties of those Sprites/MovieClips. 

 

Cheers!

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