Jump to content
Search Community

Animation on mouseleave not working as expected

Aeryla test
Moderator Tag

Recommended Posts

Hi! I'm new to GSAP and wanting some help with my animation.

Whenever the mouse enters the grey box, the blue box is supposed to move with the cursor, and when the mouse leaves the grey box the blue box is supposed to immediately return back to it's original position.

Right now it's only resetting on mouseleave sometimes, not all the time. When you move the mouse really fast it works but not when you move the mouse slowly.

I've tried looking for a solution on my own with no results, so I'm hoping someone can give me some tips. 

Thanks

 

See the Pen xJMjOeKjjzer by dalgot (@dalgot) on CodePen

Link to comment
Share on other sites

  • Aeryla changed the title to Animation on mouseleave not working as expected

Hey @Aeryla welcome to the forum ! 💚

You have some issues:

- Set pointer-events:none on your .animate class to remove the target and you can interact on the parent .link class
- Add a mouseenter event to know when the mouse enter on your .link element and start to animate the box!
- Don't animate left, top properties, it's better to use x, y properties
- Don't use transform property to change the translate, use x and y
- For better performance, calculate the mouse position in the mousemove listener and for the rest use gsap.ticker

- You can replace gsap.to(".animate",{duration:0, ...}) to gsap.set(".animate", {...}) or even better if you use gsap.quickSetter

I created a Codepen so you can check it out 🙌

See the Pen 48e69918ed59edc1ed41f503d06601f8 by nicofonseca (@nicofonseca) on CodePen

  • Like 5
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...