MrJL Posted April 24, 2023 Share Posted April 24, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 24, 2023 Share Posted April 24, 2023 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. 1 Link to comment Share on other sites More sharing options...
MrJL Posted April 24, 2023 Author Share Posted April 24, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 24, 2023 Share Posted April 24, 2023 You'll need to define onSVGleave as a variable to the element you want to hover out off. Link to comment Share on other sites More sharing options...
MrJL Posted April 24, 2023 Author Share Posted April 24, 2023 I did, on line 33 of the js: var onSVGleave = $(".svg-shape"); Link to comment Share on other sites More sharing options...
MrJL Posted April 24, 2023 Author Share Posted April 24, 2023 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 Link to comment Share on other sites More sharing options...
GreenSock Posted April 24, 2023 Share Posted April 24, 2023 We do offer discounts for educational institutions. It looks like you just sent us a message about that which we replied to. 👍 Link to comment Share on other sites More sharing options...
MrJL Posted April 24, 2023 Author Share Posted April 24, 2023 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! Link to comment Share on other sites More sharing options...
MrJL Posted April 24, 2023 Author Share Posted April 24, 2023 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 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted April 24, 2023 Solution Share Posted April 24, 2023 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! 2 Link to comment Share on other sites More sharing options...
MrJL Posted April 25, 2023 Author Share Posted April 25, 2023 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now