Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jimijbob

Scaling a masked SVG from the center

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.  

 

https://codepen.io/jimijbob/pen/Jjdermj

 

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@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 ?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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. ¯\_(ツ)_/¯

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×