Question: Tweening Opacity on IE9 & Windows 7

[CB]

Hi guys,

 

I've been trying to use TweenLite to create some banner animations. And so far I have been successfully and they render pretty well across all my Mac browsers. However there is a big issue while testing the banners on IE9 running on Windows7 (It works fine on Safari and Firefox for Windows).

 

While trying to do an opacity/alpha tween from 0 to 1 IE9 does not render the tweening in / fading in animation. It just switches it on.

However when you fade out (Tween alpha/opacity from 1 to 0) the animation renders perfectly.

 

Is anyone else experiencing this?

 

I have even tried the banners that Randall kindly created ( Example: HTML Banner using Greensock JS Beta ) and they animated in the wrong way as well.

 

Thank you for your help.

[GreenSock]

I'm not aware of any opacity issues like that, but I'll definitely look into this as soon as I'm back from the Reasons to be Creative conference. I apologize for the delay. Please stand by...

[CB]

I'm not aware of any opacity issues like that, but I'll definitely look into this as soon as I'm back from the Reasons to be Creative conference. I apologize for the delay. Please stand by...

 

No need to apologise!

Thanks for your response, I discovered that the issue was the way I was writing the code:

If I write it like this

{css:{alpha:'1'}

or

{css:{alpha:'0'}

the opacity wouldn't go up. However, when the fade out was triggered it will go automatically to 1 to start decreasing.

 

If i wrote the code as

{css:{alpha:1}

or

{css:{alpha:0}

it worked fine.

 

Unfortunately now, when testing on IE9 the console gives me some errors such as

Script5022: exception thrown and not caught TweenLite.min.js, line 14 character 8866

 

I believe I have the latest version of your code...... Has anyone experienced anything like this?

 

Thank you very much.

[GreenSock]

I tried to reproduce this issue and couldn't - would you be able to zip up a really simple example HTML page and post it here? Again, only the essential code please. I'm sure we can get it figured out.

[CB]

I apologise for not having replied to you before.

I found what the error was.

The page where my JavaScript animation was being included was setting the IE9 mode to Quirks Mode.... That was the whole issue.

Unfortunately I wasn't aware of that after a whole weekend of trying to find a solution.

Once they set the document mode correctly, the animation was displayed correctly on IE9.

 

So Once again TweenLite proves to be flawless