Gsap center absolute item isn't working for Firefox/Edge

[Tee 3 Likes (Newbie)]

I'm using gsap to make a div follow my cursor. Hence I need to center it. To do so I use the following code:

gsap.timeline().to(innerCursor, 0.1,{
    transform: `translate3d(${clientX}px, ${clientY}px,0) translateY(-50%) translateX(-50%)`,
    ease: Power1.easeInOut
});

This works for Chrome, but not Firefox or Egde - how so?

 

I know translate(-50%, -50%) isn't supported by Firefox, but how can I bypass this?

[OSUblake 18,474 Likes (Superhero)]

You really shouldn't use transform.

Do this once.

gsap.set(innerCursor, {
  xPercent: -50,
  yPercent: -50
});

 

You can move it like this.

gsap.to(innerCursor, {
  duration: 0.1,
  ease: "power1.inOut",
  x: clientX,
  y: clientY
});

 

Or like this.

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen