Aeryla Posted September 2, 2021 Share Posted September 2, 2021 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 More sharing options...
nico fonseca Posted September 2, 2021 Share Posted September 2, 2021 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 5 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now