Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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

Share this post


Link to post
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. 

Share this post


Link to post
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.  

 

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

You should use GSAP 3! It has both, a smaller file size, an improved API, and more features 🙂

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×