GSAP CSS issues on Firefox and Firefox Dev Edition

[TCwork322]

Hi,

 

I just thought I'd post here incase anybody has any insights or experience with this issue and will speed up the process of fixing the issue.

 

I'm having some issues when trying to use GSAP CSS properties on Firefox/Mozz based browsers. I'm getting the following warnings and because of them the animation I have isn't scaling or animating properly.

 

https://i.imgur.com/EevGB3Y.png

 

On Chrome and Chromium based browsers this is not the case, same goes for Safari and Opera. It literally seems to be just Moz.

What I've tried -

- Loading and Registering the CSSRule and CSS plugins, it's on a Wordpress build so I've also tried to enqueue them. No luck.

- Tried to load a CDN of all plugins and GSAP core in the header and register them, that didn't work either.

 

I'll try to provide as much code as possible on request, it's going to be limited though as I'm under an NDA and the code hasn't been written by me.

 

Appreciate any help massively,

Cheers

[ZachSaucier]

Hey TCwork322 and welcome to the GreenSock forums. Yes, a minimal demo would be greatly beneficial to us understanding the situation and being able to help. You don't have to include any of your assets - in fact it's better to start from the ground up and only include what is necessary. For more info see this thread:

 

5 hours ago, TCwork322 said:

Loading and Registering the CSSRule [plugin]

In general we don't recommend the CSSRulePlugin and instead recommend animating "real" elements (i.e. not pseudo-elements) or using CSS variables instead.

 

5 hours ago, TCwork322 said:

and CSS plugins

That doesn't make much sense. GSAP 3 includes the CSS plugin in its core so you shouldn't need to load it separately.

 

5 hours ago, TCwork322 said:

Tried to load a CDN of all plugins and GSAP core in the header and register them, that didn't work either.

Based on the warnings you're getting GSAP is loading just fine. So what do you mean it's not working?

[GreenSock]

For the record, that error indicates that you're trying to animate properties named "transformOriginX" and "transformOriginY", but I don't think those are standard. The proper way would be to just set transformOrigin. Like @ZachSaucier said, though, it's super difficult to troubleshoot blind so once we see a minimal demo (shouldn't be your actual project anyway), we'll be in a much better position to give you a solid answer. I'm sure there's a good solution available. 

[TCwork322]

Sorry for not getting back quicker, it's been hectic at work. The dev that built the animation managed to fix the problem.

 

I checked his pull request and he fixed it exactly the way you described Jack, switched all the specific axis transform (transformOriginX/Y) to transformOrigin.

 

Cheers guys, you can close this.