Is it possible to force GSAP to use transform3D

[Luckyde]

Hey there,

I'm trying to build a small 3d enviroment based off transform3d. I'm using transform3d and a transform3d library - Sprite3d. All it does is create and position 3d css shapes well in perspective and related to their parent. I've been trying to make this with gsap and matrix 3d and it does work, but matrix3d does really crazy things on the app platform i'm publishing to when i do any z transformation or z rotation, or  perspective. But i don't want to go into that, the sprite engine is my only way of working at this point and it does work great 

 

Working CSS version:

See the Pen PzpjWj by LuckyDe (@LuckyDe) on CodePen

The above has a parent container and a child box , the animation is with just basic css. The funtion just changes the transform3d raw properties and then the css automatically animates it.

 

 

I wanted to be control it with gsap instead but when i tried to move the z axes it did nothing(perspective3d is on so it should have done something)

Non Working GSAP version:

 

 

And if i move the x or y axes (also in the above pen) it deletes all the translate3d and converts it into matrix 3d

 

 

Which results in the scale being lost and it immediately changes shape

from 

 

to

 

The only benefit is that i can move x and y

z, rotationZ, scaleZ still do nothing

 

And ive tried multiple attempts in multiple different ways, using force3d:true, perspective applied to the box(does nothing) and transform perspective applied ( just changes the perspective, the z axes is still unmovable)

I'd really like to be able to have this still use translate3d and not matrix 3d so i dont spend the next month offsetting z axis values like i did before for every uiwebview build of our app when this works great i just need to figure out how to animate it with gsap and not manually with css.

So if anyone has any suggestions on either forcing gsap to animate transform3d or how to make a fake gsap tween which returns the move values and i can link that to the css update function in the working version that would be great. At least then I would have some control...

 

Thanks!

See the Pen jrBwyK by LuckyDe (@LuckyDe) on CodePen

[GreenSock]

GSAP only switches to matrix() or matrix3d() when there is some sort of rotation at play, or a 3D property like perspective or scaleZ (because you can't describe those with a simple translate3d()). If you're truly only altering x/y/z, it'll only use translate3d().

 

Performance-wise, in all my tests it was definitely faster to use matrix() or matrix3d() when there were any of those 3D properties or rotation applied. When you do the chained syntax like that library you're using does, it forces the browser to create a matrix for each one (under the hood) and multiply all the matrices together (at least I'm pretty sure that's what it does). That's slower. 

 

I think the issue in your example was caused by the fact that the library you loaded was assigning a "z" property to the DOM node itself. When GSAP initializes a tween, it automatically creates a css:{} object for you and shuttles what it believes are the CSS-related properties into that object so that the CSSPlugin handles them. One of the checks it uses to discern what should be CSS is if the raw target element has that property itself. For example, there's no such think as element.backgroundColor; it's element.style.backgroundColor. Anyway, in this case, your library added a "z" property to the element, so GSAP thought "oh, I better tween that property on the element itself rather than handing it to CSSPlugin". The solution is easy - you can define your own css:{} object and put the properties in there that you want. For example:

//OLD:
TweenLite.to(myBox3d, 5, {z:200});
//NEW:
TweenLite.to(myBox3d, 5, {css:{z:200}});

That eliminates any confusion. 

 

If you need super-tight control over building up the transform string the way you want, you can just animate a generic object and then apply it in an onUpdate, like:

myBox3d.position = {x:0, y:0, z:0};
TweenLite.to(myBox3d.position, 5, {z:200, onUpdate:function() {
    var p = myBox3d.position;
    myBox3d.style.transform = "translate3d(" + p.x + "px," + p.y + "px," + p.z + ")";
}});

(or something like that). 

 

Does that help?