Dynamically Scale Path to Fit Stage

[swampthang]

I've been having some fun with the Bezier Plugin and am starting with a set of path options for the user to choose from. I've been looking for a way to change a given path's points to fill any stage size by either height or width. I set up a starting point in the codepen with a select menu to resize and an example path. I wondered if there might be a hidden gem in GSAP's amazing arsenal that would be able to do this conversion of points. Fingers crossed!

See the Pen OZOOjB by swampthang (@swampthang) on CodePen

[Sahil]

Possible with modifiersPlugin. Though out of box solution sounds interesting to me.

 

See the Pen Bxmrax?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

@GreenSock Isn't there a property that will snap object to the start point of path before animating? I think I have used it once but can't find it in docs.

[swampthang]

Interesting solution, Sahil! I'll look that over. Thanks.

[swampthang]

I found this stackoverflow post - https://stackoverflow.com/questions/35324615/mathematically-transform-the-values-in-an-svg-path-to-fill-the-viewbox

Adapted that snippet of code and am gonna try to reduce it a good bit. This actually reworks the path points which is what I need most. Gonna try to use as much of the GSAP plugin methods as possible. This code can be a little buggy at this point but it seems to be working pretty good except for sometimes going from 400x600 to 1280x720. It ends up returning a NaN value. Forked this one and working on another.

 

See the Pen OZOzvV?editors=1010 by swampthang (@swampthang) on CodePen

 

UPDATE: I went ahead and fixed the little bug mentioned above. 

[GreenSock]

The simplest solution is probably to apply a scaleX and scaleY accordingly and set vector-effect: non-scaling-stroke on that element so that the stroke doesn't scale with it. Very little code, totally effective. 

 

If you really need to adjust all the coordinates in the path itself, here's a fork with a different technique that leverages MorphSVGPlugin's pathDataToRawBezier() functionality: 

See the Pen 33a0d6b239b34707cbb46ab938f77f5f by GreenSock (@GreenSock) on CodePen

 

I also dropped in a function at the bottom that'll take any path and spit back the transforms as a matrix array, just in case you want to essentially take the transforms and bake them into all the coordinates of a <path>. 

 

The solution I'm providing above doesn't have the limitations that the Stack Overflow one did. 

 

Good luck!

 

[swampthang]

Wow, Jack, that's an awesome solution. Thanks so much!