Jump to content


Embedded SVG object: IE11 and Android - Animation problem

Moderator Tag
Go to solution Solved by TomN,

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


I'm just starting with the JavaScript Version GSAP - awesome!

My question/problem: Animation doesn't start in IE11 and Android <=4.3


SVG is embedded as object

<object id="obj" type="image/svg+xml" height="20%" width="20%" data="img/status2.svg"></object>  


A rectangle in the svg is selected and animated:

var element = document.getElementById("obj").contentDocument.getElementById('rectangle');
TweenMax.to(element, 1, { rotation:30, transformOrigin:'50% 50%' });

No problem in Chrome and FF, but in IE11 and Android <4.4


I can't provide a codepen demo because of cross domain restrictions (embedded object) but here is a link:


Thanks for help!



Link to comment
Share on other sites

Hi TomN  :)


try this way :

var svgDoc = document.getElementById("obj").getSVGDocument();
var Rectangle = svgDoc.querySelector("#rectangle");
TweenMax.to(Rectangle , 1, { rotation:30, transformOrigin:'50% 50%' });
Link to comment
Share on other sites

Hi Diaco,


thanks for your answer, but svgDoc.querySelector("rectangle") is null. The selection

var element = document.getElementById("obj").contentDocument.getElementById('rectangle');

is valid in all browsers, e.g. IE11 changes the fill color

element.setAttribute("fill", "red");  //ok in IE11

but TweenMax doesn't recognize the element.




Link to comment
Share on other sites

Well, TweenMax definitely "recognises" the element and is applying all of the tweened styles (as evidenced by it working in Chrome and Firefox). There's a limitation in the other browsers that prevents transform styles from working unless they are added as attributes to the tag instead of as styles. There was a recent update to GSAP that detected this issue and used attributes instead, but it would appear to just be applying to inline SVG at the moment.


(also Diaco's selection method was just missing a # for ID in the querySelector)

  • Like 1
Link to comment
Share on other sites

It looks like this has to do with some conditional logic failing to recognize the element as an SVG element because it's segregated into its own document (sorta), so there's a different SVGElement used in that case. Anyway, I think I've got a solid workaround in place now, which will be in 1.14.3. I have attached a preview - please let me know if it works well for you.


  • Like 2
Link to comment
Share on other sites

  • Solution

Hi Jack,

thanks (!!), works like a charm now. I tested TweenMax.

Seems like TweenLite has some issues with the animation, but maybe my bug.

Again thanks and regards


Link to comment
Share on other sites

Glad it's working well for you. 


You mentioned that TweenLite was having some issues - could you clarify? I wonder if you just forgot to load CSSPlugin or something (remember, TweenMax has CSSPlugin inside of it, but if you are only using TweenLite you'd need to load CSSPlugin too in order to animate CSS-related properties). 

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.