Breakthrough: SVG animation with GSAP solves cross‑browser issues

Sign in to follow this   Followers 0

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