GSAP 3 not extending transforms in Firefox

[viane 0 Likes (Newbie)]

I have a line of code like this

 

gsap.to(this.$el, 0.5, { x: -bgOffset.x, y: -bgOffset.y, ease: Power2.easeOut });

In Chrome (Desktop and Mobile) GSAP does this 

 

style="transform-origin: 50% 50%; transform: translate(-50%, -50%) translate(18px, 3px);"

 

But Firefox mobile does this

style="transform-origin: 50% 50% 0px; transform: translate3d(0px, 0.9928px, 0px);"

 

Is there any way to force a consistency with the way this is handled?

 

See the Pen qBOLQPp by heyvian (@heyvian) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

Hey viane and welcome to the GreenSock forums!

 

We highly recommend that you set all transforms related to elements that you're animating with GSAP in GSAP as well. GSAP attempts to do some detection of things like transform: translate(-50%, -50%); that you have, but some browsers don't even report this properly as you've just found out. 

 

I don't have a device to test on FF mobile with, but I bet the below will work properly:

See the Pen rNOoQZw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Some side notes:

• In GSAP 3, we recommend putting the duration inside of the vars parameter.
• In GSAP 3, we recommend using the condensed string form of eases.
• You don't need to use jQuery to select the elements - just pass in the selector string  
• It's best to use xPercent and yPercent when possible.
• If you need to, you can set force3D: true on the tween.

[viane 0 Likes (Newbie)]

Well, I definitely tried gsap.set('.child', { xPercent: -50, yPercent: -50 }); at some point in my testing but that was the solution, thank you.

I've implemented the other recommendations too, appreciate the pointers.