translate and x/y

[martis]

Hey guys,

 

I have an older project where I was centering everything using

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);

I noticed when I upgraded to the latest GSAP that if I do a tween on any of those elements x or y that I lose my centering...

 

Any advice on how to remedy this without having to do a whole lot of rework?

 

Thanks

[GreenSock]

Any chance you could provide a codepen demo? I'd really like to see what's going on. We're generally VERY careful about backward compatibility, so I'm rather confused about why your legacy project would suddenly break with a newer version of GSAP. Very interested, though. 

 

FYI, we strongly encourage folks to set transform-related values directly through GSAP for a bunch of reasons (more performant, better accuracy with rotations, browser compatibility, etc.). 

 

In your case, it'd look like:

TweenLite.set(".class", {xPercent:-50, yPercent:-50, left:"50%", top:"50%"});

Note that GSAP has special "xPercent" and "yPercent" values that can actually be combined with regular x/y values for some powerful effects. 

[Dipscom]

Hello!

 

I know what martis is going through. 

 

Although I don't know why, it is something I noticed that was possible to do in the past but it is no longer now.

 

Firstly, to answer martis, question: The solution to your issue is to use the xPercent and yPercent as proposed by Jack. Just do a general call to all the elements you need centred alignment, once you do that once, it should not be necessary to re-align it.

 

From the top of my head, I can't remember if you should remove the CSS transform rules. I'd say do it just for the sake of reducing redundant code but you might not need it.

[martis]

No worries... I ended up wrapping the elements in another div. In the future I will just use xPercent/yPercent as Jack suggested.

 

Thanks!

[GreenSock]

@Dipscom and @martis, any chance you could provide an example I could take a peek at? It sounds like you both ran into the same issue but I'm kinda shooting blind here and I'd love to make sure that anything is fixed that needs fixing. 

[martis]

Hey Jack,

 

I tried to make an example that replicated the issue but was not able to recreate it...

 

There may be other external styling involved that I am unaware of

[psdpainter]

I know this is an older thread, but I just encountered the same thing. I have a draggable dialog, and the original css looked like: 

 

.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

But draggable offset the dialog's x and y position by 50%. Here is the fix (I'm using another element as a trigger for Draggable):

 

// set the dialog x,y position outside of css
gsap.set(dialog, {
  xPercent: -50,
  yPercent: -50,
  left: '50%',
  top: '50%'
});

// now draggable works without translating the dialog by 50% 
Draggable.create(dialog, {
  trigger: dialogHeader,
  type: 'x,y',
  edgeResistance: 0.65,
  bounds: modal
});

Just sharing in case someone encounters the exact same thing in 2021. 

[yuleeuz]

Cheers! Ran into the same problem.