Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Odd behavior with rotation on SVG G

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

Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider.


The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're always a pain.


Anyway, let me know eitherway!




I didn't fork the broken codepen and now it's working as intended with the updates below.

See the Pen zQOEeE by jcollette (@jcollette) on CodePen

Edited by franklylate
added clarity that codepen pulled in update
Link to comment
Share on other sites

I think you should be able to use svgOrigin and this will work just fine.


svgOrigin: "367.52 367.52"


See the Pen VOZrro by PointC (@PointC) on CodePen


Happy tweening.



  • Like 3
Link to comment
Share on other sites

Yeah, I guess I'm struggling to see the problem. As far as I can tell, it's behaving as expected. If you want to animate from the element's center, you could just add transformOrigin:"50% 50%" to your tween. Worked great for me. Otherwise, the default origin for SVG elements is always the top left. Maybe I'm missing something? 

  • Like 1
Link to comment
Share on other sites

Nope, you guys have it exactly correct!


.rotateG g, .rotateG {
    transform-origin: 50% 50%;


wasn't producing the expected behavior but svgOrigin and transformOrigin in the tween is working exactly as it should!




Updated codepen with loop+rotation at 

See the Pen zQOEeE by jcollette (@jcollette) on CodePen

  • Like 2
Link to comment
Share on other sites

Yeah, CSS doesn't work very well cross-browser on SVGs, especially with transform-related values. That's why we strongly recommend setting values directly through GSAP instead, because it works around various browser inconsistencies/bugs. :)


Glad you got it working. Happy tweening!

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