isActive() problems with mouseenter

[ainsley_clark]

Hi all,

 

I am trying to implement a logo animation turning into a coding symbol with timelinemax.

When the user moves into the logo, a few tweens happen:

 

var logotl = new TimelineMax(); 
	logotl
		.to("#logo", 0.8, {rotation: -90, ease:Power2.easeOut, yoyoEase:Power2.easeOut})
		.to("#rest", 0.5, {left: 100}, "-=0.8")
		.to("#i", 0.5, {rotation: -335, left: 50, scaleX: 1.4, scaleY: 3, color: "#F15A29", top: 10}, "-=0.8")
		.to("#n", 0.5, {scale: 2.3, left: 100, rotation: 100, }, "-=0.8")
					

 

When the user moves out of the logo area, a reverse function is called, reversing the animation:

 

$('.test').mouseenter(function() {  
	logotl.play();
})
	
$('.test').mouseleave(function() { 
	//MouseOut Animation
	if (!logotl.isActive()) {
      	//Problem Here!
		logotl.reverse();
	} 	
})

 

I have used the isActive function to find out if the animation is still playing or not because I was experiencing stuttering when the user was going back and forth over the animation.

 

My problem is now: Sometimes the reverse animation isn't played, which I can only assume is due to the isActive returning false when the user isn't over the logo (I hope that makes sense).

 

Many thanks in advance.

[PointC]

The easy solution here is to play/reverse on hover.

 

var logotl = new TimelineMax({paused:true, reversed:true});

$('#box').hover(function() {  
    logotl.reversed() ? logotl.play() : logotl.reverse();
})

 

If you could provide a demo with your questions, it would help in getting you the best answers. More info:

Happy tweening.

 

 

[ainsley_clark]

Thanks very much for your reply PointC.

 

I have tried to implement hover but still getting lots of stuttering,

I have included the codepen below, its not polished yet but you will get the gist.

If I use the isActive() function, theres no stuttering, but now, if you mouseover the .test class and mouseout before the animation has finished, the animation wont reverse.

 

See the Pen XPGgrG by ainsleyclark (@ainsleyclark) on CodePen

 

Thanks again.

[PointC]

hmmm... here's a fork of your pen with the hover() method and play/reverse that I mentioned. I'm not seeing any stuttering at all.

 

See the Pen yxwKRW by PointC (@PointC) on CodePen

 

[ainsley_clark]

Thanks once again for your reply.

 

With this pen - if you catch it at the right point (between the outside of the hover area and the inside) at the top, where the A is, it goes back and forth very quickly and isn't smooth. It may take a couple of goes to see it!

 

Thanks for the help :).

[PointC]

I think you see some oddness there because you have divs that aren't closed. You started your container and test divs, but didn't close them. On line 28 you started a new div, but I'm assuming that should have been a closing tag for the test div?

[mikel]

Hi @ainsley_clark,

 

For me, SVGs are (not only in this case) the better alternative.
Scaling typo is very often a bit ugly.
In your example, it 'twitches' at the end of the animation (?).

Therefore prefer an SVG:

 

See the Pen zJbmWJ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

 

[ainsley_clark]

Hi Mikel & PointC,

 

Thanks once again for your replies.

 

@mikel - I didn't know that its more fluid to use SVGs for animation than text, it looks a lot cleaner with your pen; I will have to use them instead.

@PointC - I have cleared up the remaining closing div tags and used your code in the link below,.

 

 

The problem is localised to the logo (even without the text) I have uploaded a youtube video to explain what I mean.

 

logoStuttering Youtube Link

 

Thanks all

[OSUblake]

Hi @ainsley_clark

 

Your issue has nothing to do with GSAP. How are mouse events detected? The mouse has to be over the bounding box of the element.

 

Your test element is listening for the events, and it doesn't have a height, which is part of the problem. If the mouse enters or leaves a child element, that event will bubble up to the test element listener. When one of the child elements rotate, the mouse might be inside the bounding box, but as it rotates more, the mouse might end up outside the box, triggering a mouse leave event.

 

This should help you see the problem. I can position the mouse in such a way that it will infinitely play back and forth.

 

See the Pen pOBeqj by osublake (@osublake) on CodePen

 

To fix it, it might help if you give your test element a height, and set pointer-events: none; in your CSS for the children of the test element.

 

BTW, you're not supposed to nest elements inside a heading element i.e. your h1.

 

 

 

[ainsley_clark]

@OSUblake You sir are a legend! Thanks for your answer. It's cleared everything up.