[IE8 opacity]

Many thanks guys!

I installed IETester and both your and my script work correctly on IE8

M

[IE8 opacity]

Thanks for your reply. I don't think jsfiddle and codepen support IE8. So I made a simple script you can see here:

 

http://gosite.it/tm/test.php

 

I made the following 8 tests (i'm using IE11 changing the rendering mode)

 

<div id="text1">BLA BLA BLA</div>

<div id="text2">BLA BLA BLA</div>

<div id="text3">BLA BLA BLA</div>

<div id="text4">BLA BLA BLA</div>

<div id="text5">BLA BLA BLA</div>

<div id="text6">BLA BLA BLA</div>

<div id="text7">BLA BLA BLA</div>

<div id="text8">BLA BLA BLA</div>   

 

TweenMax.to($("#text1"), 2, {opacity:0, z:0.1, rotationX:360});

TweenMax.to($("#text2"), 2, {opacity:0, x:1, z:0.1, rotationX:360});

TweenMax.to($("#text3"), 2, {alpha:0, z:0.1, rotationX:360});

TweenMax.to($("#text4"), 2, {alpha:0, x:1, z:0.1, rotationX:360});

TweenMax.to($("#text5"), 2, {css:{alpha:0}, z:0.1, rotationX:360});

TweenMax.to($("#text6"), 2, {css:{alpha:0}, x:1, z:0.1, rotationX:360});

TweenMax.to($("#text7"), 2, {autoAlpha:0, z:0.1, rotationX:360});

TweenMax.to($("#text8"), 2, {autoAlpha:0, x:1, z:0.1, rotationX:360});

 

With IE 10+ all tests do the fade, but with 5 and 6 the rotationX doesn't start

With IE 9 all tests fades, no one do the 3d transformation

With IE 8 the 2 and 4 tests doesn't fade

 

I would like a Tween that is able to perform the transformation (x:1, z:0.1, rotationX:360) and fading in IE10+ and just fading in IE8/9. I can find one only without x:1. This is soo strange.

 

Thanks

M 

[IE8 opacity]

Hi,

I need to animate a text with 3d effect + fading, ensuring compatibility (al least for fading) back to IE8. But I hae some problems. Consider the following example:

 

<div id="text">BLA BLA BLA</div>

TweenMax.to($("#text"), 2, {opacity:0, z:0.1, rotationX:360, rotationY:360});

 

IE10+ doed the 3d animation + fading

IE9 does the fading

IE8 does the fading

 

but if I use the following tween

TweenMax.to($("#text"), 2, {opacity:0, x:1, z:0.1, rotationX:360, rotationY:360});

 

IE10+ doed the 3d animation + fading

IE9 does the fading

IE8 doesn't fade!

 

I can't understand why adding x:1 the opacity has no effect.

 

The same happens with the following lines

TweenMax.to($("#text"), 2, {alpha:0, x:1, z:0.1, rotationX:360, rotationY:360}); // IE8 doesn't fade

TweenMax.to($("#text"), 2, {alpha:0, z:0.1, rotationX:360, rotationY:360});  // IE8 does the fade

 

With the following line IE8 does the fade but IE10+ does not the 3d effect

TweenMax.to($("#text"), 2, {css:{alpha:0}, x:1, z:0.1, rotationX:360, rotationY:360});

 

 

Thank you!