Hy-digital

Now I feel kinda silly. The reason was simply because the cache was being disabled from the devtools settings and its probably the one thing I didn't check but someone pointed it out. </thread>

Thanks for your reply Cassie, but I have a hard time believing this to be the issue. If that was the case, every tween should be impacted, when it clearly isn’t. I’ve written much more complex animations and never came across this issue before. I just got home and tried on my Windows PC which should not struggle under any circumstances, and the issue persists. Here’s a screen recording https://watch.screencastify.com/v/0EQZne79TWkO7JbPM4w7 i would like another opinion on my code to confirm that isn’t the culprit, but it should not have this impact.

After a couple hours of debuggining, it turns out that having the devtools open causes the previous image to flash for a moment after it transitions out. This happens both on codepen and locally. Attaching screenshot of specs. I did manage to reproduce it on another computer with varying degrees of success. Wanted to share this as maybe someone will encounter the same issues as me, as I tend to develop with the dev console open, I could not identify the issue. Would be good to know if this is just an isolated case for me, for whatever reason (my machine or code, etc), or an actual issue. When the console is closed, everything plays just fine. I am stumped. Edit: just tried and it happens on this page as well when I open the console. Cheers, Alex.

Hi Zach, I think you're absolutely right. I got too caught up in the easy (and lazy) way to do it. I'll go back to my original design and as you recommended, I will restructure the HTML to only bring up the relevant sub-menus when needed. Thank you for the support and I'm looking forward to sharing our website here once it is done! Solved!

Hey GSAP! We're working on rebuilding our website using Vue and GSAP (love the framework <3) and I've stumbled onto an issue. I feel a little dumb having to ask for help regarding this but I'd like to get over it! I have a vertical full screen nav that when hovered, opens up a sidenav area with sub-items. The issue I'm stuck on is that I'd like the submenu to stay open when it is hovered so users can click on the sub-items. I've tried a number of approaches but nothing seemed to work, so I'd like to ask you guys for help! I've tried changing the event handler to //create the event handler $(el) .on("mouseenter", function () { //this.style.willChange = 'transform'; this.animation.play(); }); $(".subnav").on("mouseleave", function () { //this.style.willChange = 'auto'; this.animation.reverse(); }); or //create the event handler $(el) .on("mouseenter", function () { //this.style.willChange = 'transform'; this.animation.play(); }); $(".sub-item").on("mouseleave", function () { //this.style.willChange = 'auto'; this.animation.reverse(); }); Attaching codepen url with a simple version for reference. Thank you in advance! EDIT: this seems to be working but its behaving very inconsistently, sometimes not working as expected while other times it works fine. $(el) .on("mouseenter", function () { //this.style.willChange = 'transform'; this.animation.play(); }).on("mouseleave", function () { //this.style.willChange = 'auto'; this.animation.paused() ? this.animation.play() : this.animation.reverse(); }); $(".sub-item") .on("mouseenter", function () { el.animation.play(); }) .on("mouseleave", function () { el.animation.paused() ? el.animation.play() : el.animation.reverse(); }); EDIT2: I added console logs on the event and it looks like the sub-item hover triggers three times both on enter and leave. It does seem to be working the way I need it to at the moment, but again the behaviour seems inconsistent and sometimes the sub menu will not close when hovering out or over another menu item.