Problems with position on different browsers

[dobrawa]

Hi there. Beginner in Greensock.

I am working on a page with SVG illustrations. Everything else is running smoothly and the work is satisfying... except for this little piece. 
I am talking about the round, colourful icons. It works as it supposed to ONLY on Chrome. Otherwise, all the icons start at the beginning points of the container. I checked all the classes, id's, selectors - seems fine. Then I played around in the Timeline for icons and as long as I don't do anything related to the position, it behaves normally and the icons stay on their position in the viewBox.

I have lots of other animated SVGs on the page yet only these are the problem.

Any ideas?

See the Pen aqgeRm by dobrawa (@dobrawa) on CodePen

[GreenSock]

Short answer: update to GSAP 1.20.4.

 

Explanation: in order for GSAP to animate a property, it must get the CURRENT value first (and then interpolate between the current and destination values). Transforms are trickier than any other property because (for CSS at least) the browser returns computed values in a matrix() or matrix3d() and then GSAP must decompose that into all the component values (x, y, z, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY, etc.) It’s been able to do that for years….

 

...The problem here is that SVGs allow for unlimited strings inside the “transform” attribute and unlike CSS, there are sometimes rotate() values that are very unique in that they contain the axis of rotation data inside that string. GSAP could interpret translate(), scale() and even matrix() values inside that transform attribute…but rotate() was such a unique beast and would require a lot of extra code to accommodate…or so I thought. I came across a way to force the browser to press them all together into a matrix for me, and I put that into GSAP 1.20.4.

 

In summary, until GSAP 1.20.4, it couldn’t understand the “rotate()” commands in SVG transform attributes. You were using those. It’s actually pretty uncommon because most editors simply use matrix() or sometimes translate(). But you didn’t do anything “wrong” and it’s a moot point now

 

The other option, of course, is to remove the rotate() values in the transforms (you could apply the same effect via a matrix()), but it's probably much easier to just update to GSAP 1.20.4. 

 

Happy tweening!

[Jonathan]

Hello @dobrawa and Welcome to the GreenSock Forum!

 

Here is a fork of your codepen using GSAP version 1.20.4 as @GreenSock's Jack Advised resolving your issue:

 

See the Pen wyVvLP by jonathan (@jonathan) on CodePen

 

Happy Tweening!

[PointC]

Not that it was the cause of the problems in this case, but there is an extra group closing </g> at the end and no whitespace between two attributes on the first line.  You can always drop your SVG into a cleanup tool like SVGOMG to double check for errors like that.

 

https://jakearchibald.github.io/svgomg/

 

Happy tweening.