Scaling a masked SVG from the center

[jimijbob]

Hi,

 

I'm trying to scale the mask in the centre of an SVG to scale up to reveal text below, but the end result doesn't keep the mask in the middle.  

 

 

Credit to @Sheilab67 for the original codepen.

 

Any help would be very much appreciated. This is my first attempt at TweenMax so please be gentle.

Many thanks in advance

J

See the Pen Jjdermj by jimijbob (@jimijbob) on CodePen.

[mikel]

Hey @jimijbob,

 

Welcome to the GreenSock Forum.

 

I'm not sure what you want to achieve.
If the mask is in the center, you can scale it with transformOrigin: 'center' centered relative to its center.
Here is an example with a new mask.

 

See the Pen mdJQqrB by mikeK (@mikeK) on CodePen.

 

EDIT: But you could use a certain transformOrigin for the mask to cover the rect by scaling.

I used GSAP 3 - here a proper starting blog 

 

Happy tweening ...

Mikel

[jimijbob]

This is fantastic Mikel!

 

Thank you so much. This is exactly what I was trying to achieve. I did try and use the transformOrigin: 'center' , but it looks a lot clunkier than the way you have done it.

 

Thanks again

J

[PointC]

5 hours ago, jimijbob said:

Credit to @Sheilab67 for the original codepen.

Credit to who? That's a fork of one of mine. 

 

Just giving you a hard time. Welcome to the forum.

 

Just another little nugget of info for you — you can also use a clip-path for this type of reveal. Masks can also use strokes and gradients so you can get all fancy with them. Here's a little example for you.

 

See the Pen VwLVxwx by PointC (@PointC) on CodePen.

 

Hopefully that helps. Happy tweening.

 

[jimijbob]

Ah thanks! 

 

I always need put in my place  

 

Cheers

J

[Shrug ¯\_(ツ)_/¯]

@PointC nice one. This a bit of an aside question but do you also use clip-path: polygon (CSS) much? Without factoring in your love for SVG ?, do you preferably and predominantly still stick with SVG clips and masks for compatibility ?

[OSUblake]

CSS support for clip-path is meh. It really needs support for path().

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility

 

I think CSS will be better option in the future. With SVG, you have to create an new <clip-path> element for each instance. Meaning, if you want to apply the same clip path animation to 4 different elements, but at different times, then you will need to create 4 <clip-path> elements. 

 

 

[ZachSaucier]

50 minutes ago, Shrug ¯\_(ツ)_/¯ said:

do you preferably and predominantly still stick with SVG clips and masks for compatibility ?

Yep, I second Blake. It'll likely still be years before you can move to CSS with good clip path support (unless you just want to use it as progressive enhancement).

[Shrug ¯\_(ツ)_/¯]

Thanks for jumping in @OSUblake & @ZachSaucier. I've been curious on GSAP users thoughts and I agree SVG is still the way to go. But honestly I’ve been seeing more and more clip-path: polygon usage diversely across the web lately. ¯\_(ツ)_/¯

[PointC]

2 hours ago, Shrug ¯\_(ツ)_/¯ said:

stick with SVG clips and masks for compatibility

Bingo. +1 for Blake and Zach's input.

 

The few times I've tried masking with CSS I end up running into some weird browser issue. This then causes me rage and I throw my computer through the window, the neighbors call the police, I'm arrested for disorderly conduct and then I incur fines and court costs. So... it's a financial consideration as well as a compatibility issue for me.  

[Shrug ¯\_(ツ)_/¯]

Thanks for your detailed feedback also @PointC ?

[OSUblake]

Another bad thing about CSS is that it's hard control with transforms. Take a polygon clip-path and try to scale and rotate it from the center. It's doable, but it won't be fun.