Scaling an SVG clip path

[BrianCross]

Hi everyone,

 

I'm having an issue with animating an SVG clip path. In this pen, if you click anywhere in the document, the clip path will scaleY from 0 to 1, from top to bottom, revealing the image. Adding transform-origin: "bottom"; to the CSS should reverse the direction of the transform. Instead it looks like it's scaling up off the top edge of the screen. If I manually change scaleY in the browser dev tools it does correctly scale up from the bottom and reveals the image. I'm not sure what I'm doing wrong with the tween to cause this behaviour, so any help is appreciated.

 

Thanks!

 

Brian

See the Pen 6f7a4da06dcf5f9d1bb7a9f1ac8433da by BrianCross (@BrianCross) on CodePen

[PointC]

Hi @BrianCross 

 

If it's something GSAP will be animating, I always set its initial properties with GSAP as well. I think this should work for you.

 

gsap.set("rect", { scaleY: 0, transformOrigin: "center bottom" });

See the Pen 66a924c828d379b77b02351346376189 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[BrianCross]

Hey @PointC, thanks very much! I could have sworn I tried that but maybe not. 😂 I have initialised tween targets that way before. Good to hear that's best practice. Thanks again Craig.