Jump to content


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

Recommended Posts

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?

Link to comment
Share on other sites

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



  • Like 3
  • Thanks 1
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.