Jump to content
Search Community

SVG Animations in IE

dxc test
Moderator Tag

Go to solution Solved by jamiejefferson,

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

Oh how I hate IE. I have this working in all browsers, including mobile iOS. The only place it doesn't work is in ie. Everything shows up as it should, but none of the movements happen. I'm not even sure where to start. Thanks for your help! Here's the non-codepen version if that helps: http://aprendagames.com/stock/error_pages_robot/headlessRobot/?errorcode=404

See the Pen mnbLK by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

IE doesn't support CSS transforms on SVG elements. You need to use the transform attribute of the element, although that doesn't really help with the transformOrigin.


function svgTransformIE(){
  // include a check for IE first?
  var t = this.target;
  t.setAttribute('transform', t.style.transform)

// transform origin doesn't have an equivalent attribute so it won't apply in IE
TweenMax.to(foo, 1, {rotation:100, transformOrigin:"129px 154px", onUpdate:svgTransformIE});

Not sure if there's a workaround for transformOrigin...

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