[Mousefollow over container: first animate, then follow]

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

[SVG: position mask relative]

23 minutes ago, OSUblake said:

If all you're doing is a circle, then using a div with a border-radius of 50%, and overflow set to hidden might be the easiest solution.

I can not imagine how that works. The text color should also change, not just the background color.

[SVG: position mask relative]

8 hours ago, OSUblake said:

Didn't see you were using a foreignObject. Don't do that.

Why? It works with FF, Chrome, Safari and IE Edge. I use now SVG mask.

[SVG: position mask relative]

Thank you very much for the great examples. clip-path is out of the question for my projects because of the browser support. I will take a closer look at your example and adjust it to my needs. Thank you!

[SVG: position mask relative]

Hi all!

 

I have problems with the relative positioning of the mask path. First I had a "circle" object, but I had problems with the animation in Safari, so I switched to a path object. Now I have problems with the positioning.

 

I want the red circle to always be on the right center of the parent element. Since the browser window is always different in size (responsive), the whole must be relative. At the moment it is not positioned at all.

 

The code example is reduced. I also want to move the position at certain breakpoints. For example with smaller viewports, instead of right center, bottom center.

 

Do you know possible solutions to this problem? :-).

If something is unclear, please ask.

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