Animation in IE8

[Jophine]

Hai,

 

i am facing issues in IE8 browser which have TweenLite.

<!-- MY Javascript Code-->

<script src="../../js/libs/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../js/libs/tweenlite/CSSPlugin.min.js" type="text/javascript"></script>
<script src="../../js/libs/tweenlite/TweenLite.js" type="text/javascript"></script>

function startTween(){
	 var bg = document.getElementById("bgHolder");
	 TweenLite.to(bg, 10, {css:{x:500, y:700}});
}
<!-- MY Html Code-->
<button type="button" onclick="startTween()">Start Tween</button>
<div id="bgHolder" style="background-color: #adff2f; width: 200px; height: 200px">
<div id="fgHolder" style="background-color:aqua; width: 50px; height: 50px"></div>
</div>

 

 

 

While running this code in Chrome is working fine but running IE8 its shows something different. my library's are updated, any solution for this

 

my code also in http://jsfiddle.net/jophine/cdWhF/44/

[Rodrigo]

Hi Jophine,

 

Mainly your problem is that in the css plugin x and y stands for css3 2d transform properties translateX and translateY or translate with an array of values, and those properties are not supported by IE8 and older, just from IE9, something like this:

transform: translate(500px, 700px)
//equals to
TweenLIte.to(bg, 10, {css:{x:500, y:700}});

 

Your solution is to change the css position property of your element to relative or absolute and use top and left, like this:

TweenLite.to(bg, 10, {css:{left:'+=500', top:'+=700'}});

The += before the values indicate that you are adding those amounts to the actual values of top and left of the element.

 

I updated your fiddle so you can check it:

 

http://jsfiddle.net/cdWhF/45/

 

Hope this helps,

Cheers,

Rodrigo.

[Carl]

Thanks for the help, Rodrigo. Even though those translate props aren't supported in IE8, cssPlugin can still make them work back to IE6

 

Actually, if Jophine just sets position:absolute his x/y syntax will work as shown here:

http://jsfiddle.net/...bassador/vhXYZ/

 

cssPlugin applies the proper margins to get the element to change its position.

Although cumbersome, you can use IE's dev tools to dig into the iframe that jsfiddle creates in the result panel and track down the style attribute of the bgHolder div and see what is happening behind the scenes.

 

At times CSSPlugin will use a matrix filter to get scale and other transforms to work.

[Rodrigo]

Yikes!!!

 

Sorry about that, I forgot how the plug in works in that matter. Well you learn something new everyday.

 

Cheers,

Rodrigo.

[Carl]

Hey Rodrigo,

 

No worries at all. I had to poke around myself to figure out exactly what CSSPlugin was doing. There's lots to keep track of with all these browsers and quite frankly, it isn't easy.

Keep up the great work.

 

-c

[Jophine]

Thanks for the support.

 

when i change the position of the inner div element.

 

<div id="bgHolder" style="background-color: #adff2f; width: 200px; height: 200px; position:absolute;">
<div id="fgHolder" style="background-color:aqua; width: 50px; height: 50px; top:30px; left:50px; position:absolute;"></div>
</div>
var bg = document.getElementById("bgHolder");
TweenLite.to(bg, 10, {css:{x:500, y:700}});
TweenLite.to(bg, 10, {css:{scale:3}});
​

 

 

http://jsfiddle.net/jophine/FLt9X/

 

Any solution for this

[Carl]

Yeah, IE8 stinks at letting parent transformations affect child elements.

If you put filter:inherit on the child it works a little better:

http://jsfiddle.net/geekambassador/QGJ6c/

[Jophine]

Dear Carl

Thanks for the support

 

but still my problem is not solved.

 

one the above link (filter:inherit). its working but one small problem is there. the inner div position is very in ie8 and chrome (other browsers)

attaching the screen snaps

[Carl]

Hi Jophine,

 

Yes, I see the issue. Thank you for providing the images. Very helpful and I can see the same results in my fiddle.

 

IE8 by any measure is a "broken" browser. Our CSSPlugin is already doing backflips to get even the simplest animations to work. In order for the scale of the parent element to properly change the scale and position of all child elements we would have to loop through all child elements and figure out the proper translations of their scale and position. This would be quite a taxing operation. We would have to do the same for children of children which would compound the performance issues even worse.

 

As of now, and most likely into the future, we can only support transforms of parent elements in IE8. Unfortunately this a problem inherent and unique to IE8 that doesn't have a simple work-around.

 

-c

[Rodrigo]

Hi,

 

I'm pretty sure that there's a better solution for this, but for what i saw creating a tween for the child element solves the problem in IE but creates quite a mess in any other browser, so what I would do is to use feature detection (http://modernizr.com/ or other) in order to create a code that applies only for IE (what I like to call "painful degradation"), and another that works for the rest of the browsers.

 

Playing with the fiddles i realized that you should check the offset position of the parent and child elements, then use an expression with the relation between both offsets and then a function that updates the offset of the child element as the tween progresses.

 

Now this is a lot of work and before going into that maybe you could put the child div outside the parent and give it a bigger z-index, absolute position and tween it independently and at the same time with the bigger div.

 

Like Carl said the solution is not simple, but depending on what you want to achieve may not be too complicated.

 

Best,

Rodrigo.