TweenMax.js transform rotate doesn't work in IE 9

I am trying to animate few Svg elements( Windmill , Door Open) using Tweenmax.js

The Windmill rotation works fine but the door opening animation doesn't work at all in Internet Explorer 9.

Here's my code :

var dooropen = $('#door-open');

var windmill = $('#windmill');

function DoorOpen() {
  TweenMax.to(dooropen, 3, {
    rotationY: 180,
    transformOrigin: "0% 0%"
  });
}


function rotateFan() {
  TweenMax.to(windmill, 40, {
    rotation: 360,
    transformOrigin: "51% 64%"
  });
}





$('.run').click(function() {
  DoorOpen();
  rotateFan();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="887.996" height="567.947">

  <path fill="#231F20" d="M89.917 99.025h31.58v468.42h-31.58z" />

  <g id="windmill" fill="#FFF" stroke="#231F20" stroke-miterlimit="10">
    <path d="M105.706 116.57s-50.877-56.142 0-115.79c0 0 47.368 57.894 0 115.79zM105.707 116.57s73.15-19.732 103.088 52.726c0 0-73.114 15.808-103.088-52.727z" />
    <path d="M105.707 116.57S76.25 186.372.71 165.385c0 0 32.528-67.36 104.997-48.817z" />
  </g>

  <path fill="#FFF" stroke="#231F20" stroke-miterlimit="10" d="M485.496 162.376h402v402h-402z" />
  <path fill="#231F20" d="M567.496 266.376h246v298h-246z" />

  <g id="door-open">
    <path fill="#B51543" d="M567.496 266.376h246v298h-246z" />
    <path fill="#841C3F" d="M791.496 419.376c0 2.762-2.238 5-5 5h-26c-2.762 0-5-2.238-5-5v-26c0-2.762 2.238-5 5-5h26c2.762 0 5 2.238 5 5v26z" />
  </g>

</svg>

<a href="javascript:void(0);" class="run">Run</a>

Solution

It looks like your issue is that your mixing string values with a numerical ones. The default transform-origin are percentages 50% 50% 0. So also it is best to stick with percentage based or numerical values for transform-origin in GSAP.

A two-value syntax is preferred like @Tahir Ahmed commented above. Even though the third parameter is accepted. The third value will automatically default to zero anyway, since that is the default value from the spec 0. And is only necessary when using 3D transforms, since it aligns itself to the z-axis. Which you cant use in SVG, since SVG does not support CSS 3D Transforms.

Have a look at the transform-origin spec:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Try this:

var dooropen = $('#door-open');
var windmill = $('#windmill');

function DoorOpen() {
    TweenMax.to(dooropen, 3, {
        rotationY: 180,
        transformOrigin: "0% 0%" /* top and left, omit 0 since is the default */
    });
}

function rotateFan() {
    TweenMax.to(windmill, 40, {
        rotation: 360,
        transformOrigin: "51% 64%"
    });
}

$('.run').click(function() {
   DoorOpen();
   rotateFan();
});

tranform-origin keyword equivalents:

left = 0%
center = 50%
right = 100%
top = 0%
bottom = 100%

Also check out the CSSPlugin Docs and the use of SVG transformOrigin

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

GSAP svgOrigin property, taken from CSSPlugin Docs:

[Only for SVG elements] Works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. You can either define an svgOrigin or a transformOrigin, not both (for obvious reasons).

See codepen example here of svgOrigin.

So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. Units are not required. It also records the value in a data-svg-origin attribute so that it can be parsed back in. svgOrigin doesn't accommodate percentage-based values.