Posted February 10 Hello, I have a problem where when I hover out it repeats the animation the numbers of times it has played over the time the mouse has been on it. If I hover out before it finishes his first animation iteration, then it will go back to normal without a problem. However, if I hover it for more than 2 seconds for it complete at least 2 iterations counts, then the reverse will also repeat it 2 times before it goes back to its initial position. Basically, I want it to float continuously when I hover it, and I want it to go back down once I hover out of it. Is there a way for it to just smoothly go back to its initial position? Thank you in advance. See the Pen Exjjwdm?editors=1010 by e1668058 (@e1668058) on CodePen Quote Share this post Link to post Share on other sites
Posted February 10 Hey DownfallOfADog and welcome to the GreenSock forums! First thing: use the mouseenter event, not mouseover because mouseover fires every time the mouse moves when on the element. Second thing: since your mouse is controlling the state of the animation, don't include a repeat or yoyo on the timeline. Then you get this: See the Pen BaNNmeL?editors=0010 by GreenSock (@GreenSock) on CodePen Side note: it's generally best practice to put the event listeners inside of your JS file, not using inline attributes like you have, in order to keep separation. If your JS file fails to load for example, the HTML would just throw errors. Quote Share this post Link to post Share on other sites
Posted February 11 Thank you for your reply @ZachSaucier but Im trying to do something like this : See the Pen woJgeo by MarioDesigns (@MarioDesigns) on CodePen for when I hover my mouse on the menu it will keep floating up & down. And when I back out I just want it to go back to its original position without the menu repeating the animation. Sorry if I wasnt clear. Quote Share this post Link to post Share on other sites
Posted February 11 Hey @DownfallOfADog, This is the job for a condition that checks whether the repeating action should continue onStart or not. See the Pen dyooKjJ by mikeK (@mikeK) on CodePen Hayppy checking ... Mikel 2 Quote Share this post Link to post Share on other sites
Posted February 13 Thank you for your response @mikel. Is there a way to directly make the div go back in place as soon as the mouse leaves? Quote Share this post Link to post Share on other sites
Posted February 13 Hey @DownfallOfADog, This could be an option See the Pen mdJeYRM by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Quote Share this post Link to post Share on other sites
Posted February 13 14 hours ago, mikel said: Hey @DownfallOfADog, This could be an option Happy tweening ... Mikel Oh that was exactly what I had before I decided to work with gsap to try to make it return smoothly directly after the mouse is out. Seems like its impossible, but I will do my best to try to make it happen. Right now my current menu is a mix of your solution but it will continuously try to find the offsetTop with getBoundingClientRect() in react. I'll post an update if I happen to find a convenient or inconvenient solution. But help will still be appreciated. Thank you. Quote Share this post Link to post Share on other sites
Posted February 13 4 minutes ago, DownfallOfADog said: Seems like its impossible, but I will do my best to try to make it happen. It's not clear what you want but I highly doubt it's impossible. Do you mean if someone unhovers you want it to complete more quickly? If so you could do this: See the Pen LYVGyJb?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Quote Share this post Link to post Share on other sites
Posted February 14 Hey @DownfallOfADog, Your decision for GSAP was and is absolutely right: a perfect set of instruments. The point is: you are the director, the conductor, who lives out his creativity. Play with the multitude of possibilities and you will find a solution that suits you. See the Pen gOpPGqe by mikeK (@mikeK) on CodePen Happy tweening with GSAP ... Mikel 3 Quote Share this post Link to post Share on other sites
Posted February 15 Thank you @ZachSaucier and @mikel. It wasn't impossible afterall. Thanks to both of you, I managed to make something like this : See the Pen oNXbrJd?editors=1010 by e1668058 (@e1668058) on CodePen I didn't include the onStart inside the timeline because for some reason React gives me an error. And I'm using timelineMax instead of timelineLite because I read that timelineMax offers features like repeat and yoyo. Quote Share this post Link to post Share on other sites
Posted February 15 You should use GSAP 3! It has both, a smaller file size, an improved API, and more features 🙂 1 Quote Share this post Link to post Share on other sites
