Jump to content
GreenSock

dxc

SVG Animations in IE

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.

e.g.

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

Hi dxc  :)

 

i think if that's really important to work in IE , you can put the SVG parts into same size Div and animate the divs or use Raphaël / another SVG JavaScript Library .

Link to comment
Share on other sites

Oh, I didn't realize transformOrigin wouldn't work in IE. That makes life a little tougher. I may have to just be content with the animation not working in IE . . . stupid IE. 

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