Hi there. I'm working on an ad (can't share the actual images for) The behavior is different in IE9 from all other browsers. (i don't have access to test on anything above IE9) I haven't encountered this issue before. In addition, these are transparent png with drop shadows, the drop shadows fill while it's animating.
As you can see from the following code:
var i = 0;
var a = 1;
var d = .5;
var d2 = .55;
var d3 = .56;
var t = .5;
var tt = .25;
var e = Power2.easeOut;
TweenMax.set("#container", {alpha:a, ease:e});
TweenMax.to("#jacket", t, {y:35, x:-20, delay:d, ease:e});
TweenMax.to("#helmet", t, {y:66, x:-14, delay:d3, ease:e});
TweenMax.to("#goggles", t, {x:-105, y:10, delay:d2, ease:e});
TweenMax.to("#boots", t, {y:-6, x:16, delay:d2, ease:e});
TweenMax.to("#shirt", t, {y:-5, x:98, delay:d, ease:e});
TweenMax.to("#shoes", t, {x:-40, y:2, delay:d2, ease:e});
//TweenMax.to("#hat", t, {x:-100, delay:d3, ease:e});
TweenMax.to("#txt1", tt, {alpha:i, delay:2});
TweenMax.to("#txt2", tt, {alpha:i, delay:2.1});
TweenMax.to("#txt3", tt, {alpha:i, delay:2.2});
TweenMax.from("#txt2_1", tt, {y:25, alpha:i, delay:2.3});
TweenMax.from("#txt2_2", tt, {y:35, alpha:i, delay:2.4});
TweenMax.from("#bar", tt, {y:35, alpha:i, delay:2.5});
TweenMax.from("#txt2_3", tt, {y:35, alpha:i, delay:2.6});
TweenMax.from("#cta", tt, {y:35, alpha:i, delay:2.7});
I'm doing tweens on divs moving them based on their x and y positions.
Looks great in everything but IE9 as I mentioned above. If you watch for example, the direction the #shirt div moves in any browser and then try in IE9. Moves in the opposite direction. Any suggestions? I tried switching the x and y to left/right top/bottom to no avail. I know MSFT is not supporting IE and I'm trying to guide my work off of 9, atleast, but in the meantime I could use some help. Thanks in advance for any tips.