TranslateZ not working

[Darcey 5 Likes (Newbie)]

Hi,

 

Anyone got any ideas as to why this doesn't work? CSS version is correct, GSAP is not.

 

z:200 is not doing anything?

 

 

  gsap.to(box1, {
    duration: 2,
    x: 200,
    z: 200, // Not working??
    rotationY: 360,
    backgroundColor: "#000000",
    color: "#FFFFFF"
  });

 

 

Thanks

D

See the Pen OJPZMmN by Starglider (@Starglider) on CodePen

[GreenSock 18,876 Likes (Superhero)]

That's an order-of-operation thing. If you check Dev Tools, you'll see that perspective(500px) is indeed applied, but after the translation. One of the benefits of GSAP is that it always delivers consistent results with transforms and one of the ways it does that is by enforcing a consistent order of operation. Trust me - this is a GOOD thing, but in edge cases like this it doesn't deliver what you're looking for by default. You can get that result by using an onUpdate to alter the transform on each tick, moving perspective to the front, like: 

 

onUpdate: function() {
  this.targets().forEach(function(target) {
    target.style.transform = "perspective(500px) " + target.style.transform.replace(" perspective(500px)", "");
  });
},

Does that clear things up? 

[Darcey 5 Likes (Newbie)]

Nice one thanks

Interesting I didn't know about "this.targets()"  

 

I often do the following when I run into things like this:
 

let animVo = {v:0};
gsap.to(animVo,{duration:10,v:100,onUpdate: updateStyle});

function updateStyle(){
	element.style.property = animVo.v;
}

*I could have/should have inlined the function 😛 

 

But will def, give that onUpdate function a disection and a various tests, thanks for that  

D