Help de-glitching hover based animations

[MrJL]

Hi everyone. First time poster here. I've been working on a svg composition where hovering over different elements triggers different timelines. I've got it working but it's a little glitchy if you move between items quickly, which is something a lot of people will do, so I'd like to ask the hive mind here if there's anything I can do to smoothen out those glitches and make for a better experience. 

There are 3 elements and each has a timeline where the elements change shape and size that fires when hovering that element. These all work when hovering over them from the default state, but sometimes, especially when moving quickly, only part of the timeline works and one of the elements doesn't change. 

I'm a GSAP beginner, this is my first project using it, so forgive me if I've made some noob errors!

See the Pen KKGgPXg by mrjonoces (@mrjonoces) on CodePen

[mvaneijgen]

Hi @MrJL welcome to the forum!

 

It seems that if I remove the .reverse() animation there are no issues. Because you're animating the new timeline as soon as you hover over the new elements, so if you just tween between them directly without first reversing, everything seems to work as expected. 

 

I would create another timeline called reset that morphs all shapes back to their original shapes and put an onLeave hover on the whole SVG, so it only resets when you're not over any shape. 

// Pseudo code
onSVGleave.on('mouseout', function(){
    reset.play();
});

And I would  draw three boxes and make those your hover triggers and keep them the same size all the time, so don't animate their size, otherwise what could happen (and I think is happening) the hovered shape changes size and then loses its hover mid way thought the animation. If you make fixed boxes this will not happen. And will feel more consistent. Hope it helps and happy tweening

 

 

See the Pen RwepoYM?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Note: I've looked at bit better at your SVG code and I think things are not correct. on line 6 on your HTML the SVG gets closed and then not opened again. Personally I would create one big SVG with all the shapes you want to morph to and just hide all other shapes except the initial ones. 

[MrJL]

So I've given that a go and I can't get the reset timeline to fire. Have I misunderstood what you meant in your instructions @mvaneijgen?

 

See the Pen yLRMMYp by mrjonoces (@mrjonoces) on CodePen

[mvaneijgen]

You'll need to define onSVGleave as a variable to the element you want to hover out off.

[MrJL]

I did, on line 33 of the js:
 

var onSVGleave = $(".svg-shape");

 

[MrJL]

In using console log to diagnose the issue I saw the warning that the MorphSVG plugin is a premium feature, which means I can't use it as this is for a university funded site with a tiny budget so I'm going to have to go back to the drawing board with this idea unfortunately

[GreenSock]

We do offer discounts for educational institutions. It looks like you just sent us a message about that which we replied to. 👍

[MrJL]

7 minutes ago, GreenSock said:

We do offer discounts for educational institutions. It looks like you just sent us a message about that which we replied to. 👍

Yes, thank you for the reply Jack!

[MrJL]

So by investigating the issue with the console I can see that the mouseout event isn't firing when the mouse leaves the square div the shapes are contained within. Weirdly it only fires when the mouse moves through the vertical centre line of the div or when the mouse moves out of the div on the right edge. But even when that event gets logged the reset animation doesn't play, so something else is going on too. It also appears that each timeline only plays once, I'm guessing due to the same issue?

See the Pen yLRMMYp?editors=1111 by mrjonoces (@mrjonoces) on CodePen

[Rodrigo]

Hi,

 

IMHO I think you are overcomplicating this quite a bit. Because of that you're creating conflicting GSAP instances that are colliding with each other and creating some issues when each timeline is created the first time.

 

If you will have those three letters always then is simpler to create a new GSAP instance on each mouse enter event and on the mouse leave in order to prevent some visual glitches you'll get when hovering over a different letter. The code overhead should be minimal and it doesn't seem to create any problems in the tests I ran. Here is a simplified example of what you're trying to do:

See the Pen ZEqexzW by GreenSock (@GreenSock) on CodePen

 

As you can see I removed a lot of HTML/CSS/JS and stored the paths d attributes as strings to reduce the confusion in the HTML side. Also I removed those absolutely positioned elements that were triggering the mouse over event oddly because their position didn't matched the paths positions.

 

Hopefully this helps.

Happy Tweening!

[MrJL]

Amazing Rodrigo, it's working perfectly. Simplicity is usually the solution! Thank you so much for taking the time to completely rewrite that, that's above and beyond. I really appreciate your efforts.