Jump to content
Search Community

TimeLineMax mouseover repeats itself

jiggy1965 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

I've created a simple banner animation with a mouseover effect that simply changes color of the button. Below doesn't completely work

 

$( document ).ready(function() {
	
tl = new TimelineMax();
btn = new TimelineMax();
// start animation

tl.from("#text1", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=.5");
tl.from("#text2", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=1");
tl.from("#text3", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=1.5");
tl.from("#text4", 1.5, {x:-340, ease: Back.easeOut.config(1.7)}, "start+=2");

//tl.from(".logostaand", 2, {opacity:0, y:-100, ease:Back.easeOut, rotationY:180, scale:4}, "start")

// end amination

// creates hand cursor
$('.container').css('cursor', 'pointer');

// mouseover
$( ".container" ).mouseover(function() {
//animation
btn.to("#button", 1, {backgroundColor:"#5CB130", scale:1.2, transformOrigin:"0% 50%"});
console.log ('over');
});

//mouseout
$( ".container" ).mouseout(function() {
// animation
btn.to("#button", 1, {backgroundColor:"#3460A9", scale:1, transformOrigin:"0% 50%"});
console.log ('out');
});

// clicktag function
$( ".container" ).click(function() {
  //ExitApi.exit();
});

// makes container visible when animation starts 
$(".container").css("visibility", "visible");

});

 

What happens is that the button changes color, but it does that repeatedly. It's like during the transform it fires a mouseover/mouseout repeatedly. When I change btn.to to TweenMax.to however it works like I expect it to. It just fires 1 mouseover and does it's thing and on mouseout changes back again. What am I doing wrong?

Link to comment
Share on other sites

Hello @jiggy1965 and Welcome to the GreenSock forum!

 

You might be dealing with an event bubbling issue. You could try and use mouseenter instead of mouseover, and use mouseleave instead of mouseout. Mouseneter and mouseleave do not allow event bubbling like mouseover and mouseout, so that can help with the multiple event firing your seeing.

But to better help you, can you please create a limited codepen demo example. This way we can see your code live and in action to test.

 

 

Thanks Happy Tweening! :)

 

 

  • Like 3
Link to comment
Share on other sites

Usually its best to just create your timeline outside of your hover event handlers, and just play on hover in (mouseenter) and reverse the timeline on hover out (mouseleave).

 

Below are examples of playing and reversing a timeline when hovering so you don't have to create multiple timelines on each hover. This way you create one timeline and just simply play and reverse the timeline animation.

 

See the Pen NxVMBx by jonathan (@jonathan) on CodePen

 

See the Pen tukhf by jonathan (@jonathan) on CodePen

 

Adding a timelines to multiple elements

 

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

 

Happy tweening! :)

  • Like 4
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...