SVG: position mask relative

[ViolettaDigitalCraft]

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.

[ZachSaucier]

Hey Violetta and welcome to the GreenSock forums.

 

With this sort of use case, you might want to use a clip-path rather than a mask. See this article for more info on why.

 

There are several ways to do this sort of effect. The first is to not use SVG/CSS at all and just use CSS clip paths:

See the Pen KKKBRMG?editors=1000 by GreenSock (@GreenSock) on CodePen.

 

Another option would be to position the circle with GSAP/JS on resize:

See the Pen MWWBGOd?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

You could also move the HTML outside of the foreignObject (duplicating it using .cloneNode(true) in JS) and then apply the SVG mask/clip path to that content.

 

I'm not sure which method is the best supported across different browsers. The best way may depend on who your clients are. You can check support for this sort of thing.

 

[ViolettaDigitalCraft]

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!

[ZachSaucier]

Masks have more or less the same amount of support https://caniuse.com/#feat=css-masks

[OSUblake]

14 hours ago, ViolettaDigitalCraft said:

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!

 

Just use an SVG clip-path or mask. The support is near 100% and that's how CSS clip-path/mask work under the hood.

[OSUblake]

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

[ViolettaDigitalCraft]

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.

[OSUblake]

12 minutes ago, ViolettaDigitalCraft said:

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

 

It's just very problematic. It can create rendering artifacts during animations. And if you transform anything inside the foreign object, it will mess up the positioning.

 

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.

[ViolettaDigitalCraft]

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.

[OSUblake]

35 minutes ago, ViolettaDigitalCraft said:

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

 

It works the same way as a clip-path or mask.

 

Move your mouse over the text.

 

See the Pen 946d5ebb14c5f5790369ce9ef0c84b39 by osublake (@osublake) on CodePen.

 

[OSUblake]

Here's the math to cover an entire area with a circle...

https://greensock.com/forums/topic/18880-page-transition-with-barbajs/?tab=comments#comment-87730

 

See the Pen PdZQrL by osublake (@osublake) on CodePen.

 

 

[TrulyNewbie]

x

[TrulyNewbie]

On 11/13/2019 at 8:09 AM, OSUblake said:

 

It works the same way as a clip-path or mask.

 

Move your mouse over the text.

 

 

 

 

Hi, does anyone know how I can make the mask be center of the cursor on load? At the moment it snaps to the cursor as soon as you move it. I was also thinking if there was a way to delay the movement? like it follows the cursor? Maybe that will combat the jump

[OSUblake]

51 minutes ago, TrulyNewbie said:

Hi, does anyone know how I can make the mask be center of the cursor on load?

 

Sorry, but there is no way to get the cursor position until it has moved.

 

You could have it hidden, and then move it to the center on the first move or animate it. 

 

container.addEventListener("mousemove", onFirstMove);

function onFirstMove() {
  container.removeEventListener("mousemove", onFirstMove);
  
  // make visible and set position
}

 

Also note that that demos are using the older syntax.

 

[mikel]

 

"The browser doesn't know where the mouse is until it moves.

It's more complicated than just "get me the cursor position". What if there is no mouse (tablet) or what if the mouse is not over the browser window?

For the same reason, you can't get hover events on an item if the cursor is already hovering when the page loads. It takes a mouse movement for those events to fire.

Go to some site, hover over a link that has a hover effect (like underline), refresh the page (without moving your cursor) and you'll see that even though your cursor is hovering over the link, it doesn't get the hover treatment until you move the cursor.

Unfortunately this is a browser-level issue, not a javascript issue."

See stackoverflow

 

 

[OSUblake]

10 minutes ago, mikel said:

It's more complicated than just "get me the cursor position". What if there is no mouse (tablet) or what if the mouse is not over the browser window?

 

Another excellent point, which is why I would suggest having it hidden until there has been a "first" mouse movement.

[mikel]

28 minutes ago, OSUblake said:

which is why I would suggest having it hidden until there has been a "first" mouse movement.

 

Yes, You can ...

 

See the Pen abJrvqa?editors=0010 by mikeK (@mikeK) on CodePen.

 

Quod erat demonstrandum ...

Mikel

[Display Name]

I would be very grateful if you could help get this animation when hovering the cursor changes text and color as well as text as if inside a circle. I've been looking for a very long time for a solution but couldn't find one. Thank you very much in advance!

[Cassie]

@Display Name 

Please don't expect people to do all the work for you. You've already been asked gently to stop rephrasing and reposting the same question. I'm going to repeat that again. Please stop rephrasing and reposting the same question.

Asking the same question multiple times will not provide a different result. If you read the information provided you will have everything you need to achieve your goal. If you try and get stuck we are happy to help. 

[Cassie]

Also - as I mentioned in the other thread the solution is right here

 

See the Pen 946d5ebb14c5f5790369ce9ef0c84b39 by osublake (@osublake) on CodePen.

 

I don't know how much more help we can provide you than a working codepen demo!