Jump to content
GreenSock

themepunch

transformOrigin vs 'transform-origin' & transformPerspective

Recommended Posts

Guys, please help me to understand why things looks different when i use transformPerspective + transformOrigin vs transformPerspective + 'transform-origin' as shown in my example here:  

 

If you inspect the elements you see that different transform origins get set on those objects. All animations use transform3d , however at the first example the transformOrigin get set via 2 axis (x,y) and the position of "pages" calculated via x,y,z,rotation  BUT in the second example the origin get set by 3 axis (x,y,z) and the "pages"  have on position x,y,z 0, only rotation is adapted.  

 

Older version GreenSock managed by matrix3d, and animation looked well.  I would like to use the transformOrigin and the transformPerspective, however would like to understand why the pages shown up like in the 2nd example? 

 

ps: The reason why i dont want to use 'transform-origin' that the elements get "zoomed" versus  solution 1.      Perfect is Solution 3, however i must set transformPerspective 0 to achieve that...

See the Pen QWwYOYv by themepunch (@themepunch) on CodePen

Link to comment
Share on other sites

Hm, it looks like an order of operation thing. Perspective() must come first. I'll look into switching that in the next release, but for now you could just add this function as an onUpdate to your tween(s):

function fixPerspective() {
  let targets = this.targets(),
      i = targets.length,
      exp = /perspective\([a-z0-9]*\)/,
      transform, perspective;
  while (i--) {
    transform = targets[i].style.transform;
    perspective = transform.match(exp) || [];
    targets[i].style.transform = perspective[0] + " " + transform.replace(perspective, "");
  }
}

That just re-orders things. 

 

Also, the reason we remove the "z" portion of the transformOrigin and re-create that effect via translation is to work around a Safari bug that has existed for years which botches the rendering of rotation when there's a 3D transform-origin, as you can see here: 

See the Pen 8c1acc1074fa8c9e705d7cd66ff625f4 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 4
Link to comment
Share on other sites

41 minutes ago, GreenSock said:

Does that help? 


Awesomest !   That not just help but makes me the happiest Man alive ;-)   The z fix for Safari is something i was fighting also since years.   

Do you think it will have big effect on complex tweens ?  We have a lot happening in the same time, and i am afraid to call onUpdate from all kind of tweens, may have some side effect on things?  
 

Brilliant solution again!  Thank you ! 

Link to comment
Share on other sites

5 hours ago, themepunch said:

Do you think it will have big effect on complex tweens ?  We have a lot happening in the same time, and i am afraid to call onUpdate from all kind of tweens, may have some side effect on things?

It shouldn't have much of an effect as in slow down, no. It's just updating a property. Only use the function on the tweens that need the fix though :) 

  • Like 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

It shouldn't have much of an effect as in slow down, no. It's just updating a property. Only use the function on the tweens that need the fix though :) 

Yeah, it costs 0.002ms per Tween. We have customers  with over 250+ elements tweened dynamically. Even if it does not feel like a  significant cost, I think a solution in core will be the better variant. 

 

Thanks again, i added the current workaround until the fix is released. Cheers and happy weekend ! 

Link to comment
Share on other sites

I just pushed 3.1.1 up and it has this fix in it, so you should be able to just snag that and remove the onUpdate workaround. 🎉 

 

Enjoy!

  • Like 3
Link to comment
Share on other sites

16 hours ago, GreenSock said:

I just pushed 3.1.1 up and it has this fix in it, so you should be able to just snag that and remove the onUpdate workaround. 🎉 

 

Enjoy!

 

Thank you Jack ! Just seen the update and it works perfect now ! You guys are faster than a speeding bullet ! 

  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...
On 1/24/2020 at 9:37 AM, GreenSock said:

Also, the reason we remove the "z" portion of the transformOrigin and re-create that effect via translation is to work around a Safari bug that has existed for years which botches the rendering of rotation when there's a 3D transform-origin, as you can see here: 

See the Pen 8c1acc1074fa8c9e705d7cd66ff625f4 by GreenSock (@GreenSock) on CodePen

 

Hi Jack ! Sorry to bother you with this old thing, but seems that something changed at safari since the last version.  
The Z index / z Depth bug is back and unfortunately the workaround from your side is not working any more. 
Any idea  ?   also a simplified version of the bug : 

See the Pen qBdmoRy by themepunch (@themepunch) on CodePen

    OR here without GreenSock at all: 

See the Pen VwLydzJ by themepunch (@themepunch) on CodePen

 

Thanks and hope you guys have an idea. Would be Wonderfull ! 

Link to comment
Share on other sites

Safari is indeed the new IE. Have you made a bug report for Safari?

Link to comment
Share on other sites

I don't think Safari considers that a "bug" - it has worked that way for YEARS (unless I'm misunderstanding your question). 

 

Safari could argue that their behavior is "correct" and all the other browser vendors have it wrong because technically Safari is rendering the 3D space more accurately, as the elements slice through each other. Like if you take two pieces of paper on top of each other, and then you rotate one on its y-axis, it would intersect with the other paper, like cutting it in half. See what I mean? 

 

The only way I know of to get the behavior you want is to actually affect the z position, like lifting one piece of paper way off the other one, enough so that when it rotates it doesn't intersect with the other one. 

  • Like 2
Link to comment
Share on other sites

Hi Jack. Indeed i thought also years that the Safari implement this correct, until i learned that in different transform-style containers the elements should behave like they dont know about the other containers, and there only the z-index should be respected.  

 

Lets say you use two "canvas" and on both you draw a 3d image.  This should be possible, and this is why the preserve-3d / flat transform styles are there. isnt it-  In this case all other browsers render well except Safari.  What do you think ?

Link to comment
Share on other sites

Oh, I agree that the way other browsers render things is "better" in my opinion. I'm just saying that Safari has never (to my knowledge) worked that way. I can't imagine there's anything GSAP can do to change that. Can you think of something? 

 

If you want them to change their rendering behavior, I'd suggest contacting the Safari team. My guess is they've heard plenty of complaints over the years. :)

 

  • Haha 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.
×