Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tweening directly to a specific matrix3d transform

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/

  • Like 4
Link to comment
Share on other sites

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.

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