Jump to content
GreenSock

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

TranslateZ not working

Recommended Posts

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

Link to post
Share on other sites

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? 

  • Like 3
Link to post
Share on other sites

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


 

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

×