Jump to content
Search Community
DownfallOfADog test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.  

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...