Hey all, I'm having an issue using GSAP to scale an SVG path and clip-path element.
The path is scaling relative to the center (which is what I'm looking for) but the clip-path is scaling relative to the top left of the the element. At first I thought it might have been an issue with "normalizing" the SVG path to fit into a viewbox with value "0 0 1 1" but that doesn't seem to be the case. (I've commented out the normalized path at the top of the file, which gives the same result).
I've tried a few values for transformOrigin, including "50% 50%" and "center" and "center center" lol
Is scaling relative to the center for clip-paths possible?
Scaling SVG clip-path from the center?
in GSAP
Posted
Hey all, I'm having an issue using GSAP to scale an SVG path and clip-path element.
The path is scaling relative to the center (which is what I'm looking for) but the clip-path is scaling relative to the top left of the the element. At first I thought it might have been an issue with "normalizing" the SVG path to fit into a viewbox with value "0 0 1 1" but that doesn't seem to be the case. (I've commented out the normalized path at the top of the file, which gives the same result).
I've tried a few values for transformOrigin, including "50% 50%" and "center" and "center center" lol
Is scaling relative to the center for clip-paths possible?
Thanks!
See the Pen PoKgEGE by carterduong (@carterduong) on CodePen