Jump to content
Search Community

TranslateZ not working

Darcey test
Moderator Tag

Recommended Posts

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 comment
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 :) 



  • 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.
  • Create New...