Jump to content
Search Community

Scaling a masked SVG from the center

jimijbob test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

5 hours ago, jimijbob said:

Credit to @Sheilab67 for the original codepen.

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

 

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.

:)

 

  • Like 4
  • Haha 2
Link to comment
Share on other sites

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. 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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).

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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. ;) 

  • Thanks 1
  • Haha 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...