Tweening directly to a specific matrix3d transform

[garrickbrazil]

I have a regular html image that I would like to tween to very specific matrices like so:

 

TweenMax.to("img", 1, { transform:"matrix3d(0.631517, -0.116881, 0, -0.000456567, -0.229144, 0.749892, 0, -0.00143939, 0, 0, 1, 0, 28.7394, -30.3039, 0, 1)", transformPerspective: 100});

 

For some reason when I do this it sets the transform property to be matrix(0.56999, -0.10549, 0.13806, 0.74597, 28.7394, -30.3039) and I cannot figure out why for the life of me.

 

I've also tried searching the forums but was not successful in finding anything which solved my issule. I tried to use force3d:true and I also tried putting the transform obj into a css object instead but it has not worked

 

When I apply the transform matrix directly into the css of the image it transforms it perfectly how I expect it.

 

Any ideas?

See the Pen ZWLxPM by anon (@anon) on CodePen

[GreenSock]

I'm looking into this and I'll get back to you as soon as I've got an answer. Your particular matrix is a very interesting/unusual case that doesn't register any rotationX or rotationY even though visually it appears to have a 3D rotation. 

 

I'm just curious - where did you get those values and why are you animating that way instead of just selecting certain rotation/scale/position values? Nothing wrong with it, but it's unconventional and I'm curious. 

[garrickbrazil]

Awesome, thank you.

 

The values were retrieved from this very handy site: http://edankwan.github.io/PerspectiveTransform.js/.

 

For a little more context, we need the ability to (basically) corner pin an image at certain keyframes. There are other target images which each have a front facing plane that has unknown rotation in X, Y, and possibly Z and for each of these targets we need to apply a different image over top. Trying to guess and check the rotations results in moderately okay mapping but is very time consuming and still doesn't end up how we hope unfortunately.

[Carl]

Not sure if this makes things easier for you but you can actually tween the corner positions of your images using GSAP and perspectivetransform.js.

So instead of trying to match the matrix of the final result, just move the corners where they should be.

 

Check out this demo: http://jsfiddle.net/ajgagnon/traebhhe/5/

[garrickbrazil]

Carl, thank you!

 

I believe your idea solves our problem. I need to verify this later tonight but I had time to see your demo and tweak it as we desired. I somehow didn't realize that any object/property could be tweened that way. This opens up a lot of other possibilities for us as well.

 

Thanks again.