Jump to content


Possible to scale pathDataToBezier

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'm using the pathDataToBezier to create a path for my tween to follow. All is good...


...except I would like to be able to scale the path for responsive screen sizes.


I have not figured out a way to do this. I've tried to scale the path smaller before calling "var path = MorphSVGPlugin.pathDataToBezier", but there seems to be no effect.


Any ideas? Am I missing something?

Link to comment
Share on other sites

I may have read my animation wrong because I was also rotating an object and might have mistaken it for the motion of the path. I tried to delete my previous post, but did not have the option.


If someone could clarify that it is possible to scale the motion path, that would be great.


Thank you.

Link to comment
Share on other sites

Yes, the pathDataToBezier() method allows you to specify a transform matrix that will be applied to the path: 

//transform the path using a matrix (rotate 45 degrees and move to right by 200px)
MorphSVGPlugin.pathDataToBezier(myPath, {matrix:[0.7071, 0.7071, -0.7071, 0.7071, 200, 0]});

read docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/


If you need help generating the matrix values see: http://codepen.io/Tinricon/full/ptAho/

  • Like 3
Link to comment
Share on other sites

Just noticed that generator doesn't do rotation. 


Figuring out matrices can be really confusing, especially if you have nested transforms. This post shows how to get the browser to calculate the matrix for you using a polyfill. It only works for SVG elements though.




  • Like 2
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.