Jump to content
Search Community

Problems with position on different browsers

dobrawa test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 3
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...