Jump to content
Search Community

Mousefollow over container: first animate, then follow

ViolettaDigitalCraft test
Moderator Tag

Recommended Posts

Hi all


I have an area, when you move the mouse over it, the icon follows. If you move the mouse outside the area, the icon is positioned back in the center. So far that works, see Codepen. Now I want the icon not to jump to the mouse cursor, rather to animate the change of position. And it should also be animated to the middle and not jump.




In my project, the icon is a video play icon and the container is the video. I'm sure you've seen something like this :-).


Can someone help me? Or does someone know a gsap example where this was solved?

See the Pen MWYQQdy by alsodenn (@alsodenn) on CodePen

Link to comment
Share on other sites

Hey @ViolettaDigitalCraft,


This could be an option


  gsap.set(ball, {fill:'green'});

  gsap.to(ball, {attr:{cx:145, cy:145}, fill:'red', duration:1});


See the Pen ExaQpOp by mikeK (@mikeK) on CodePen


Happy tweening ...



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