Possible to scale pathDataToBezier

[Roddy]

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?

[Roddy]

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.

[Carl]

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/

[OSUblake]

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.

https://greensock.com/forums/topic/15274-tween-to-first-point-of-path/?p=66372

 

.