Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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:  

https://codepen.io/themepunch/pen/QWwYOYv

 

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...

Share this post


Link to post
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

Share this post


Link to post
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 ! 

Share this post


Link to post
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

Share this post


Link to post
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 ! 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×