FLIP to 4-corner SVG path

[KoentjeV]

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

[Rodrigo]

Hi,

 

As far as I can tell this is not possible because the target path you're using for the Flip animation is not transformed, so basically the Flip plugin is looking at both elements and the only difference it sees are the dimensions (width/height) and position, hence the result you're seeing right now. Here is the result when the target is transformed:

See the Pen poqzoxe by GreenSock (@GreenSock) on CodePen

 

If you want to do the transform matrix update by hand you could check these resources:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d

https://3dtransforms.desandro.com/

 

Although I would stick with GSAP since the core has built in support for transforms and is highly optimized to do matrices calculations if what you want to do is just skew and rotate the box, no need to go into all that trouble when GSAP has you covered IMHO 🤷‍♂️

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

4 hours ago, Rodrigo said:

basically the Flip plugin is looking at both elements and the only difference it sees are the dimensions (width/height) and position, hence the result you're seeing right now.

Yeah, it's just using the bounding box for your SVG shape. It can't know that you want to contort it into a different angle like that, since the native shape itself is more like a diamond shape. @Rodrigo's solution is a good one. 👍

[KoentjeV]

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.

 

[Rodrigo]

Ahh yeah another round in the endless battle between designers and developers. It always reminds me of this (just switch client with designer and designer with developer, but the gist is the same)

 

[KoentjeV]

Hehe no worries, we have a good relation

[Shrug ¯\_(ツ)_/¯]

Using @Rodrigo's above example the following would be closer to your example:

 

gsap.set(skewBox, {
  rotation: 210,
  skewX: -30,
  scaleY:0.864
});

It might not be applicable to your desired setup (Div matching SVG) but wanted to mention that morphSVG plugin-in not only morphs shapes but also position and size, which at times can prove very useful. It would simplify things to choose all CSS or SVG, then either build everything with CSS and use the Flip plugin, or everything with SVG and use morphSVG, if you can ¯\_(ツ)_/¯.