Jump to content
Search Community

Can't use em unit on x, y, z?

iperryt test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is there really no way to translate element using em values? Was searching a lot and the only info I got is that it's intentional what I can't understand at all.

 

I created responsive 3d Scene with a lot of elements and for the z-axis I had to use em values. So the only thing I do with javascript is setting the font size on the main object. The rest was just plain css and html but today I tried to rebuild it with TweenMax because I plan to animate some of the elements. Furthermore I tried to load all the parameters from a config and set the values with the set function. And the only problem I got, it is ignoring the em unit and replaces it with px what is just ridicules.

 

Now don't tell me there's any point in converting/replacing em to/with px when using the set function.

Link to comment
Share on other sites

1 hour ago, iperryt said:

Is there really no way to translate element using em values? Was searching a lot and the only info I got is that it's intentional what I can't understand at all.

 

It's not ridiculous. There are technical reasons for that behavior. For example, how you would specify em units for a 3d matrix? 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d

 

 

If you want to use relative units, then consider using CSS vars instead. An example using vh and vw.

 

See the Pen OvbqXL by osublake (@osublake) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Thank you for the fast answer, unfortunately I don't want to scale my object depending on the viewport. The scene is only one part of my creation and the main thing has to keep its aspect ratio so there's no way to use viewport based units.

 

I found another animation library... It's working how I want it so I guess we done here. Just crazy that only cause it is using matrix (what is not the only way to animate) some units are disallowed completely. So if you want my honest feedback, for a library so heavy (even the lite version without ease, timeline and css3?!) there's no way you can't fit unit detection and if em just don't use matrix. Or at least a plugin or something...

Link to comment
Share on other sites

3 hours ago, iperryt said:

Thank you for the fast answer, unfortunately I don't want to scale my object depending on the viewport. The scene is only one part of my creation and the main thing has to keep its aspect ratio so there's no way to use viewport based units.

 

That's not at all what I was suggesting. I made that demo to show how to use non-pixel units for transforms. Using em, rem or anything other type of unit would work exactly the same.

 

3 hours ago, iperryt said:

So if you want my honest feedback, for a library so heavy (even the lite version without ease, timeline and css3?!) there's no way you can't fit unit detection and if em just don't use matrix. Or at least a plugin or something...

 

I think you might be missing the forest for the trees here. The way GSAP handles transforms is the one of the biggest selling points for a lot of people, but I'll let @GreenSock know how you feel about special units.

 

 

  • Like 2
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...