SVG group translateY bug in Safari

[ikoshele]

Hi

 

I'd like to animate group in SVG icon - simple slide in from the top. In Chrome works properly, but in Safari not. GSAP doesn't write transform matrix to the style attribute, only to the transform attribute. TranslateY(-100%) setted by default.

Safari: https://c2n.me/48nRWyv
Chrome: https://c2n.me/48nRZs7

 

Will be glad if someone could help.

 

[ZachSaucier]

Hey ikoshele and welcome to the GreenSock forums.

 

What version of GSAP are you using? As of GSAP 3 matrixes are no longer used as the default in transforms. The basic demo below behaves the same way in both Chrome and Safari for me.

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

 

Please modify the demo to recreate the issue that you're talking about then click the "fork" button and share the new link with us.

[ikoshele]

Hi, thank you for the reply.

Here is the demo with my problem.
In Chrome "Launch fabriq" sliding down when clicking Play, in Safari not.

See the Pen xxZaVqB by ikoshele (@ikoshele) on CodePen

Safari v. 13.0.5

[ZachSaucier]

We highly recommend setting all transform values on elements that you're animating with GSAP in GSAP. Not setting them with GSAP is one of the common GSAP mistakes. You can read about why it's important to do so in that post.

 

Here's how I'd set it up, making use of some tips in my article on animating efficiently:

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

[ikoshele]

Thanks a lot