Jump to content
Search Community

GSAP 3 not extending transforms in Firefox

viane test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.
  • Like 3
Link to comment
Share on other sites

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. 

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.
  • Create New...