Jump to content


GSAP SVG Compatible?

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


I'm detected some issue/bug with latest version while check (make compare with other animation engine)!

Has simple demo made by @GreenSock!



When using v1.17.0 instead of v1.16.1, SVG TransformOrigin is breaking, i think latest version isn't for SVG!


Really for SVG recommend v1.16.1?

See the Pen 17b4f47aa28f02e305dab386e9f79e89 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi Dalisoft,


Thanks for reporting the issue.

I can totally see how it looks like a bug, but it really isn't.

In a nutshell, that demo was meant to illustrate how applying a transformOrigin to an SVG  <rect> will give the same results as applying it to a <div>.

However, we later added a smoothOrigin feature which makes applying a transformOrigin to transformed SVGs even more intuitive http://greensock.com/svg-tips. The problem you experienced in that demo is due to the fact that the code was written prior to the existence of smoothOrigin and didn't account for the new behavior.


Everything is technically working as expected and I've updated the demo you mentioned to work with 1.17.0


Here is video explanation of everything



Thanks again for bringing this to our attention.

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