[translate and x/y]

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. 

[Greensock is amazing. The end.]

Greensock is incomparable, and I just wanted to say thank you @GreenSock and all parties involved for making this unbelievable product.