Bug with loosing vertical centering

[Payman]

Hi guys,

 

whenever I change some params (x or rotationX to be specific)  to a vertically aligned object it loses it's alignment. Basically gsap doesn't want to preserve my css:

transform: translateY(-50%);

See the Pen JROYrg by alecpro (@alecpro) on CodePen

[Jonathan]

Hello Payman, and Welcome to the GreenSock forum!

 

I am sorry you having issues. Thank you for the codepen example, very helpful showing the issue your seeing.

 

Please standby while we inspect your codepen demo

[GreenSock]

Yep, this is expected behavior, and while it may seem contrary at first, this is actually a strength of GSAP, not a weakness or bug. 

 

One of the inherent weaknesses of doing transforms in pure CSS is that all the components (x, y, scaleX, scaleY, rotation, skewX, skewY, etc.) are mashed into a single "transform" property. Thus, you cannot maintain the state of one component (like "y"/"translateY") while altering another (like "x") without a lot of headache, and it's impossible to ease them differently or offset timing. GSAP solves all of these problems, but it gets a little awkward when you try to mix both CSS and GSAP.

 

When GSAP gets the current state of the transform, the browser spits back a matrix() or matrix3d which is ALWAYS pixel-based (percentages are just translated into px at that point). So GSAP has no way of really knowing that you intended units to be %-based. This is why we always recommend that you set all your transform-related values through GSAP (at least on things that you plan to animate). This allows GSAP to properly discern intent with your units. In this case, just add this one line to the top of your JS: 

TweenLite.set(".box", {yPercent:-50});

Done.

 

Now GSAP knows that you want that value to be a percentage. Again, this isn't due to some bug in GSAP - it's just that the browser itself reports things always in px, and there's no way for GSAP to know otherwise. 

 

Flowing all your transform data through GSAP makes it much cleaner and more flexible. You can then very easily overlap easings/timings/whatever with any of the individual components, and you can look up their values simply using the _gsTransform object. Oh, and they'll work more consistently as well (like on SVG elements which won't work properly in many browsers if you try with CSS alone, or in an older browser like IE8). 

 

Does that answer your question? 

[Payman]

 

Does that answer your question? 

Yes. Thank you for your help