[FLIP to 4-corner SVG path]

Hehe no worries, we have a good relation

[FLIP to 4-corner SVG path]

Thanks guys.
The problem is that the shape I want to transform to is a down-tuned shape that I received from the designer and not a shape i constructed myself.
So i think I will have to settle with trying to approximate the shape using rotate and/or skew.

 

[FLIP to 4-corner SVG path]

I'm trying to fit a div to a svg path consisting of 4 points.
Using FLIP, the div transforms to the boundaries of shape instead of the shape itself but the desired outcome would be to skew(?) to the "3d" shape.

Is it possible to use flip library in this case?
If not, does anyone now how to calculate a transform matrix? I do have the exact 4 points of the corners I want to transform to.
 

See the Pen mdQNgLr by KoentjeV (@KoentjeV) on CodePen

[non-scaling-stroke and DrawSVG]

Ah, very interesting. Yes, it looks like that effect basically forces the length of the shape/line to be calculated at the screen level (after scaling) rather than on the raw/native shape itself. I took a crack at applying the math to adjust the length accordingly in DrawSVGPlugin and you can test it on codepen using https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js. Better? Once you confirm it's working the way you'd expect, I can drop it into the official bonus zip that you can download and use on your own site(s). 

 

Thanks for letting us know about this. 

So will you update the plugin or should I overwrite the drawSVGPlugin with your solution?

[non-scaling-stroke and DrawSVG]

Ah, very interesting. Yes, it looks like that effect basically forces the length of the shape/line to be calculated at the screen level (after scaling) rather than on the raw/native shape itself. I took a crack at applying the math to adjust the length accordingly in DrawSVGPlugin and you can test it on codepen using https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js. Better? Once you confirm it's working the way you'd expect, I can drop it into the official bonus zip that you can download and use on your own site(s). 

 

Thanks for letting us know about this. 

Thanks for the responses and fix guys!

Great work!! 

[non-scaling-stroke and DrawSVG]

Dear gsap friends,
I've been experimenting with DrawSVG plugin.

It seems that setting vector-effect="non-scaling-stroke" to a polygon makes the DrawSVG plugin go crazy.

A simple animation from 0% - 100% works without the vector-effect set. Setting the attribute makes the animation go wild

Any thoughts on this?

See the Pen wWOrNr?editors=1111 by KoentjeV (@KoentjeV) on CodePen