Jump to content


Opacity & Rotation not working properly in IE 7, 8? Can you check my code?

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



First - thanks so much for making this javascript framework!


I've been trying to get an animation going in IE7/8 that I got to work on all other browsers using your framework, but it doesn't function properly in those browsers.


You can see it in action here: http://neu14.com/transitions/print/index2.html


I'm also attaching my files -> see index2.html (that one uses greensock).


Thanks for any thoughts!



PS: I'm unclear if I need the CSS plugin for rotation or opacity or not since they both can be numeric? (I used it, but not sure if it was needed)


Link to comment
Share on other sites

I noticed several things:

  1. Your jQuery script that is supposed to kick things off isn't firing in IE8 (and before). $("#highway-bg").load(transition); I'm not quite sure what you're trying to do there, but I think it'd be better to just call transition() directly. Looks like a jQuery or IE bug.
  2. You've got a bunch of Firefox-specific styles applied directly to your image elements which would explain why things work differently in Firefox than other browsers. I suspect you'll want to strip that stuff out.
  3. You're loading a file with the wrong name (EasePack.js.js).
  4. There's a bug in IE 8 (and earlier) that incorrectly renders elements that have a rotation applied AND an alpha value (both are filters) and the transform is AFTER the alpha in the list of filters (that's just silly). I just posted a new version of CSSPlugin that ensures the transform/matrix comes first. Please download the latest version and you should be set (after fixing the other errors above).

Does that help?

  • Like 1
Link to comment
Share on other sites

You're amazing, thank you so much! I'll address all of those and re-download and get back to you with the results.

Link to comment
Share on other sites

Got it working! Thanks for updating the CSS plugin, I really appreciate it. One note and one more question:


Question: How do I change the animation step size (meaning the frame rate so to speak, or the interval at which the animation is updated), so I can lower the processing burden on older and less efficient browsers such as IE? (also if you happen to know for Jquery, that would also be a bonus)


Note: I did need the browser-specific CSS for IE and older other browsers (wouldn't work without)

Link to comment
Share on other sites

To change the interval at which all tween's update use the ticker's fps() method like so:


TweenLite.ticker.fps(30) // sets max framerate to 30

Link to comment
Share on other sites

  • 6 months later...

I am having problems in IE with rotation and alpha transparency can anyone give me an alternative to the way i am currently implementing and get rid of the dreaded black around the png. I have attached working files and everything is great in all browsers except IE 8 and below. 


thanks for your time, 




Link to comment
Share on other sites

Hi Scott,


Welcome to the GreenSock forums.


I wish I had better news for you, but that black border around transparent pngs is a bug baked deep into IE8. I have researched the issue in the past and to my knowledge there is no reliable CSS or JavaScript based solution. 


The closes I've come to a "solution" is this: http://stackoverflow.com/a/8587386


Using those settings in photoshop, you don't get the black border, BUT there is no anti-aliasing either. No smooth gradiation of semi-transparent pixels. If anything you could load images compressed this way only for IE8 and it may look a touch better than the black border.


I've attached your files with 1 of the images using the settings mentioned above. It doesn't look great, you'd probably get similar results with a gif.




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.