Mousefollow over container: first animate, then follow

[ViolettaDigitalCraft]

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.

 

Codepen: 

 

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

[mikel]

Hey @ViolettaDigitalCraft,

 

This could be an option

 

$('#screen').mouseenter(function(){
  gsap.set(ball, {fill:'green'});
  gsap.ticker.add(update);
});

$('#screen').mouseleave(function(){
  gsap.ticker.remove(update);
  gsap.to(ball, {attr:{cx:145, cy:145}, fill:'red', duration:1});

 

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

 

Happy tweening ...

Mikel