Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tee

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.
×