TransformOrigin on SVG rect clipPath

[cotton]

I'm trying to animate a clipPath <rect> width from 0 to 100% using scrollTrigger and scrub and would like it to grow from the centre.

I've tried using transformOrigin which seems to work because it only fills 50% of the space so presume the other half is off screen and the centre is actually on the left of the window?

 

I managed to get it working using css transform-origin with toggleClass on click of a button but dropping it into GSAP seems to present a new problem.

 

I've attached a screen of the transforms applied, I'm wondering does GSAP affect the data-svg-origin attribute see here?

 

Any help would be greatly appreciated.

 

 

See the Pen oNbbxEN by Cottonltd (@Cottonltd) on CodePen

[ZachSaucier]

Hey cottoncreative and welcome to the GreenSock forums. Thanks for being a Club GreenSock member!

 

As @PointC likes to say, trouble-free SVG animations come down to three things:

1. Asset prep
2. Asset prep
3. Asset prep

In this case I recommend using a viewBox on your SVG (so GSAP can know what the dimensions of the SVG are), using clipPathUnits="objectBoundingBox" on your clipPath, and explicitly sizing your rect. 

See the Pen MWKKQaO?editors=0100 by GreenSock (@GreenSock) on CodePen

 

Note that I also improved some of your CSS and JS.

[cotton]

Hi @ZachSaucier

 

Many thanks for that, wonderfully simple with the correct prep.

Apologies for the dumped CSS/JS, thank you for giving it a neaten.

 

This is my first big push into animating SVG/Clip-Paths so I'm glad I've got this as a grounding to build on now.

Are there cases when viewBox isn't recommended and what's a good resource for all these intricacies?

 

Thanks again
James

 

 

 

[OSUblake]

4 minutes ago, cottoncreative said:

Are there cases when viewBox isn't recommended and what's a good resource for all these intricacies?

 

When you don't want the svg to scale, so it's a fixed size.

 

I think this is a good svg resource.

http://tutorials.jenkov.com/svg/svg-viewport-view-box.html