Jump to content
Search Community

IE9 position tween issues

sorciereus test
Moderator Tag

Go to solution Solved by sorciereus,

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

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. 

 

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

Link to comment
Share on other sites

  • Solution

Hi. I actually fixed this myself by converting all the tweens to relative tweens like this:

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, {top:"+=35", left:"-=20", delay:d, ease:e});
TweenMax.to("#helmet", t, {top:"+=66", left:"-=14", delay:d3, ease:e});
TweenMax.to("#goggles", t, {left:"-=105", top:"+=10", delay:d2, ease:e});
TweenMax.to("#boots", t, {top:"-=6", left:"+=16", delay:d2, ease:e});
TweenMax.to("#shirt", t, {top:"-=5", left:"+=98", delay:d, ease:e});
TweenMax.to("#shoes", t, {left:"-=40", top:"+=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, {top:"+=25", alpha:i, delay:2.3});
TweenMax.from("#txt2_2", tt, {top:"+=35", alpha:i, delay:2.4});
TweenMax.from("#bar", tt, {top:"+=35", alpha:i, delay:2.5}); 
TweenMax.from("#txt2_3", tt, {top:"+=35", alpha:i, delay:2.6});
TweenMax.from("#cta", tt, {top:"+=35", alpha:i, delay:2.7});  
 Hadn't had this bug come up before which is why I was interested - I do have a question about backgroundPosition in IE9 but I'll make a seperate thread sometime. 
Link to comment
Share on other sites

Hi,

 

it would really help if you would take the time to replace your missing images with some type of content (just use a background color) and minimize the code so that we can focus on the problem. For instance, if the #shirt isn't animating correctly just include enough html, css, and js to show the #shirt mis-behaving. 

 

I tried to reduce down to just the #shirt and could not get IE9 to misbehave: http://s.codepen.io/GreenSock/debug/NGMpXJ

 

You really shouldn't have to resort to using relative values with left and top. x and y should work fine in IE9. If you can provide a clear demo verify that my reduced case shows the problem, we will certainly take another look

  • Like 1
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...