Jump to content
Search Community

IE 8 - Jerky Tween

Mekong 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,

 

Wondering if someone can offer advice.

 

I've set up a simple tween using TweenMax. It works great in Firefox etc but, in IE8, the animation is very jerky to the point where I don't think it's usable.

 

I've checked out this forum (and the web in general) for any info. or fixes that might be available but can't find any solution.

 

I wonder if anyone else has had this problem? I'm a newbie to this so maybe I've done something wrong.

 

My HTML and JS code is shown below:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>"]http://www.w3.org/TR...nsitional.dtd">[/url]
<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="[url="http://code.jquery.com/jquery-1.7.1.min.js%22></script>"]http://code.jquery.c...n.js"></script>[/url]
<script type="text/javascript" src="src/minified/TweenMax.min.js"></script>

<style type="text/css">

html, body {
overflow:hidden;
margin:0;
}

#nav{
position:fixed;
left:0;
bottom:0px;
width:100%;
height:70px;
background-color:#000;
z-index:100;
font-family:Arial, Helvetica, sans-serif;
border-top:#fff 1px solid;
}

#centre_nav{
width:300px;
margin-left:auto;
margin-right:auto;
}

#nav ul{
list-style-type:none;
color:#fff;
margin:0;
padding:0;
}

#nav li{
padding-top:5px;
float:left;
}

#main_pic{
position:absolute;
left:0px;
}

</style>

</head>

<body>

<div id="nav">
<div id="centre_nav">
<ul>
	<li><a href="#" class="main" onclick="go_home()"><img src="images/home_btn.jpg" width="96" height="45" /></a></li>
	<li><a href="#" class="main" onclick="go_about()"><img src="images/about_btn.jpg" width="96" height="45" /></a></li>
	<li><a href="#" class="main" onclick="go_contact()"><img src="images/contact_btn.jpg" width="96" height="45" /></a></li>
</ul>
</div>
</div>

<div id="main_pic"><img src="images/tattoo-4-bw.jpg" width="1800" height="531" id="header"/></div>

<script language="Javascript" type="text/javascript">
function go_contact(){
	var main_pic = document.getElementById("main_pic");

	TweenLite.to(main_pic, 0.5, {css:{left:"1800px"}});
}

</script>

</body>
</html>

Link to comment
Share on other sites

First, a comment: old versions of IE are just terribly slow in general which has nothing to do with TweenMax. It's the browser itself. It looks like you're trying to move a lot of pixels (almost 1 million) which, for IE8, can be quite a chore to render. All TweenMax does is set the property via Javascript (which is very fast), but then the browser has to render the graphics/images which can take vast amounts of time by comparison.

 

That being said, I'd be happy to look at your file if you'd like to post it. I'd need to get the image too (any support files actually) so that I can see it in context. I suspect, however, that you might simply be running into a browser limitation. Thank goodness IE8 is almost dead in terms of market share.

Link to comment
Share on other sites

Hi Jack,

 

Thanks for your reply.

 

I think you are correct that the problem comes down to IE8 limitations (and the large image it has to deal with).

 

Anyhow, attached are the relevant files. If you get the chance it would be great if you could look at them to double check I haven't done anything too dumb.

 

Note that the HTML file is really simple. I was just trying to get the basic code working.

 

Many thanks,

 

Mekong

basic_test.html

post-12834-0-79614400-1352944631_thumb.jpg

post-12834-0-45628100-1352944667.jpg

post-12834-0-38549000-1352944668.jpg

post-12834-0-31590300-1352944669.jpg

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...