garrickbrazil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
-
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?
Tweening directly to a specific matrix3d transform
in GSAP
Posted
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.