Jump to content


Dynamically Scale Path to Fit Stage

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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!


  • Like 5
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.