Jump to content

Breakthrough: SVG animation with GSAP solves cross‑browser issues

| GreenSock

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

We're excited to announce enhanced SVG support baked right into GSAP's CSSPlugin. Now you can animate the rotation, scale, skew, position (and even change the transform origin) of SVG elements just like normal DOM elements. The chart below illustrates a number of cross-browser bugs related to CSS transforms on SVG elements. Four modern browsers interpret the same basic animation code in drastically different ways.

Browser comparison (without GSAP)

See the Pen GIFS: SVG + CSS Transform Problems by GreenSock (@GreenSock) on CodePen.

  • IE and Opera don't honor CSS transforms at all (must use the "transform" attribute)
  • Firefox doesn't honor %-based transform-origins
  • In Safari, if you zoom in or out it breaks the transform-origin sync between %-based and px-based values.
  • Firefox doesn't recognize keyword-based transform-origin values like "right bottom", and Safari alters them when the zoom is anything but 100%
  • In all browsers, px-based transform-origins are measured from the parent SVG's 0,0 coordinates instead of the top left corner of the element itself. This is inconsistent with how transform-origin works on every other type of element. This is discussed in length in the video at time: 4min 44sec.

Pretty awful, huh?

GSAP to the rescue

Notice how GSAP animates SVG <rect> and <div> identically.

See the Pen SVG + CSS Transform Timeline by GreenSock (@GreenSock) on CodePen.

Be sure to test the demo above in IE, Opera, FireFox, Safari and Chrome to see equal results.

Find out how it all works

In order to help a wider audience understand how to get around the obstacles of working with SVG, Jack wrote an article packed with tons of info, animation demos and a video showing all the juicy details on www.css-tricks.com. We're honored that Chris Coyier allowed us to share these enhancements and time-saving techniques with the wider developer community on his highly-respected blog. Get all the juicy details in: SVG Animation and CSS Transforms: A Complicated Love Story. The techniques discussed will surely transform your SVG animation workflow ;)

Get an all-access pass to premium plugins, offers, and more!

Join the Club

We consider it a privilege to serve you. Glad you're here.

- Team GreenSock

User Feedback

Recommended Comments

There are no comments to display.

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