Jump to content
Search Community
ditorelo test
Moderator Tag

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 read this forum front to back and can't find a solution for my problem.


We're using the TweenMax pack on a animation and it works amazingly on Chrome, FF and Safari, as you would expect. Even IE9+ is a doozie and we're not having problems with that.




IE8 insists in not playing ball. So after a lot of debugging and fiddling around, I have two questions for you.


1) I notice that a few of the animations use "filter:progid:DXImageTransform.Microsoft.Matrix" while other will use use margin to move things around. Why's that? I can't find a pattern why TweenMax.


The animations that use "filter" work fine. But...


2) The animations using margin don't.

If I use "TweenMax.to" it disregards the current position of the element and starts from 0x0.

The "from" values below are also disregarded and the animation starts from 0x0.

TweenMax.fromTo(_cloud_small, 4.6,  {css:{x:600}},  {css:{y:120, x:200}});

We've tried changing 'x' and 'y' to 'left' and 'top' and a whole bunch other things, but nothing seems to work. It is as if on onStart the the object's margin is set to 0 and the animation starts from there.


Why, I ask you, WHY? :)


I've spent a few hours on this now, and I can't understand the reason. Any clues will be most appreciated!



Hug of the bear and thanks!

Link to comment
Share on other sites

Sorry to hear about the trouble. Yeah, IE8 can be a PAIN to deal with, especially when it comes to transforms because the ONLY way you can do it is to use IE-specific filters which are painfully slow and cumbersome to work with. For example, if you rotate the object using the filter, you'll see that it actually completely shifts the entire object over and down so that the corners can fit within the area which means the center is completely thrown off, as is the width/height of the overall box. That's why we have to use margins - those are to offset the results of the filters and keep things lined up properly. We put a ton of effort into crafting those algorithms and delivering consistent results in older versions of IE. 


Anyway, I've got a few questions for you:

  1. What version of TweenMax are you using? Please make sure you're using the latest one (1.9.5 as of today). 
  2. Did you set position:absolute on the object you're transforming? 
  3. Are you setting the margin to some other value (before the tween) and TweenMax is incorrectly setting it back to 0? Or do you have it set to "auto" or something like that?
  4. Are you just trying to move the object horizontally/vertically, but not scale/rotate/skew it? If so, yeah, it'd be better to just use top/left instead of x/y. 
  5. Can you please post a very simple example, maybe as a codepen or jsfiddle, so that we can see what's happening? It's very difficult to troubleshoot blind. 
Link to comment
Share on other sites

Thanks for the reply, Greensock! :P


Here's the reply to your questions:


1. We're using the latest version of TweenMax.

2. Objects are absolutely positioned.

3. No margin change before the animation whatsoever.

4. Animation is only vertical / horizontal, no other properties being updated.

5. http://jsfiddle.net/pkgbR/5/ -> This doesn't reflect my full code, but there's not much different going on apart from the fact that the clouds are a sprite with background-position set on the real code. This is the gist of it.


Thanks once more!

Link to comment
Share on other sites

Ah yes, you happened to stumble across a very particular scenario that required an extra workaround inside CSSPlugin for IE8 (and earlier). Sorry about the hassle. This should be resolved in the latest version (just posted). The CDN isn't updated yet, though, so I'd recommend snagging the zip from http://www.greensock.com/?download=GSAP-JS or use the github repository. Please let us know if that resolves things for you.

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