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: https://codepen.io/alsodenn/pen/MWYQQdy 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?

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

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

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!

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. https://codepen.io/alsodenn/pen/ZEEjrzb Do you know possible solutions to this problem? :-). If something is unclear, please ask.