Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sorciereus

IE8 not loading animation properly

Recommended Posts

Hi there - I have a file that works just how I want in all the browsers. However I must support back to IE8. The animation is not working at all in IE8. 9 is fine 10 is fine.. but 8? Totally broken. Elements appear randomly on the page and do not animate at all. Please help. 

 

Here is my code:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GreenSock: My films</title>
<!--css goes here -->     
<style>
#container
{
  width:924px;
  height:250px;
  background-color:#000000;
  opacity:0;
  position:relative;
 
}
 
#my_films
{
width:875px;
height:422px;
opacity:0;
margin-top:55px;
margin-left:20px;
}
 
#season2
{
width:285px;
height:44px;
margin-top:0px;
margin-left:19px;
}
 
#grantland
{
width:304px;
height:44px;
margin-top:5px;
margin-left:0px;
opacity:0;
}
 
#packshot
{
width:365px;;
height:265px;
position:absolute;
left:335px;
top:20px;
opacity:0;
}
 
#holiday
{
width:142px;
height:16px;
position:absolute;
left:722px;
top:84px;
opacity:0;
}
 
#starts
{
position:absolute;
left:714px;
top:104px;
opacity:0;
}
 
#buy
{
position:absolute;
left:747px;
top:210px;
opacity:0;
}
 
 
</style>
</head>
 
<body>
<div id="container">
   <div><img src="images/my_films.svg" id="my_films" /></div>
   <div id="season2"><img src="images/season2.png" /></div>
   <div id="grantland"><img src="images/grantland.png"></div>
   <div id="packshot"><img src="images/packshots_lrgest.png" /></div>
   <div id="holiday"><img src="images/holiday.png" /></div>
   <div id="starts"><img src="images/starts.png" /></div>
   <div id="buy"><a href="#"><img src="images/buy.jpg" /></a></div>
</div>
 
<!--- The following scripts are necessary to do TweenLite tweens on CSS properties -->
 
<script>
 
window.onload = function(){
     TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn});
     TweenLite.to(my_films, .75, {width:177, height:44, alpha:1, ease:Power1.easeIn, delay:1});
     TweenLite.from(season2, 1.5, {alpha:0, delay:2.2});
     TweenLite.to(grantland, .5, {x:19, alpha:1, delay:3});
     TweenLite.to(packshot, 5, {alpha:1, ease:Power4.easeIn});
     TweenLite.to(holiday, 1, {alpha:1, delay:4});
     TweenLite.to(starts, .75, {alpha:1, delay:4.8});
     TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5});
     }
     
</script>
 
 
</body>
</html>
Link to comment
Share on other sites

Hello sorciereus, and Welcome to the GreenSock Forums!

 

In the <script> tag in the code above, you are missing the variables that reference your elements:

  • container
  • my_films
  • season2
  • grantland
  • packshot
  • holiday
  • starts
  • buy

Unless you forgot to paste the rest of your code. And are you seeing this on:

  • Windows 7 (IE8 standalone) ?
  • or on Windows XP (IE8 standalone) ?

:)

Link to comment
Share on other sites

I'm not sure what you mean about missing the element tags - I see them? For example: TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn});

 

I'm testing on Windows XP using a newer version of IE and then using developer tools to replicate IE8. Could this be part of the problem?

Link to comment
Share on other sites

IE8 is the highest IE version on Windows XP PC. So then your on Real IE8 standalone, right?

 

When your in the developer tools, is this what your have selected:

 

Broser Mode: IE8

Document Mode: IE8 Standards

 

?? or are in compatibility mode ??

 

Thanks :)

Link to comment
Share on other sites

Actually it's Window's 7 Enterprise running IE 9. 

 

Also I was told I didn't need this line by a greensock developer:

var container = document.getElementById("container");

 

Is that what makes it work in IE8?

Link to comment
Share on other sites

oh i see.. my bad.. i forgot the selector defaults to document.getElementById();

 

IE9 wont render IE8 accurately.. Even the New IE11 on Windows 7 and Windows 8 wont render IE8 accurately either. And actually cause good markup tags not to close properly.

 

Windows XP support stops this April 2014, which means IE8 stops and/or dies.. :D  .. Google stopped support for IE8 last November, and stopped support for IE8 on all its services at the end of 2013. jQuery versions above 1.10.* no longer support IE8.

 

I have even seen where IE8 on Virtual Environments (VMware) will also render differently than a actual Windows XP/7 PC - IE8 (standalone) .

 

So the only way i know of getting an actual test, is to use the standalone version of IE8, without Documnet Modes.

 

If you really need to test and get an accurate render of IE8. Then you could try uninstalling IE9, and it should default back to IE8... or you can download IE8 here to test with.

 

I also made a codepen example of your code from above. If viewing in IE8 on codepen you can only view it in Full Mode:

 

Full Mode (for IE8):

See the Pen DneFc by jonathan (@jonathan) on CodePen

 

Edit Mode:

See the Pen DneFc by jonathan (@jonathan) on CodePen

Link to comment
Share on other sites

Thats interesting - Also curious - how come if I view the gsap media on the greensock site in the simulated IE8 environment it renders the animation properly (slow, but it animates) - for example if I watch the greensock intro found on this page in the IE8 that I'm also testing my unit in, it animates correctly?

http://www.greensock.com/gsap-js/

Link to comment
Share on other sites

I just tested on Windows XP PC - IE8 standalone (IE8 Standards), and did not see any problems with loading your code.. it animated fine!

 

The code above... is that all your code that's not loading for you?

 

Have you tried testing your code with the TweenMax cdn path ?? :

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>

Please comment out the TweenLite, EasePackPlugin, CSSPlugin JS script tags... and replace with above to test if your code works... but it should work with those 3 scripts.

 

TweenMax has TweenLite, EasePackPlugin, CSSPlugin, TimelineMax, and many more goodies included in it.

 

From TweenMax Docs:

 

http://api.greensock.com/js/

 

TweenMax extends TweenLite, adding many useful (but non-essential) features like timeScale(), repeat(), repeatDelay(), yoyo(), updateTo(), and more. It also activates many extra plugins by default, making it extremely full-featured. Any of the plugins can work with TweenLite too, but TweenMax saves you the step of activating the common ones like CSSPlugin, RoundPropsPlugin, and BezierPlugin. Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. The syntax is identical. You can mix and match TweenLite and TweenMax in your project as you please, but if file size is a concern it is best to stick with TweenLite unless you need a particular TweenMax-only feature.

 

:)

  • Like 2
Link to comment
Share on other sites

Also, please try changing your script to this:

window.onload = function(){
  TweenLite.to("container", 1, {autoAlpha:1, ease:Quad.easeIn});
  TweenLite.to("my_films", .75, {width:177, height:44, alpha:1, ease:Power1.easeIn, delay:1});
  TweenLite.from("season2", 1.5, {alpha:0, delay:2.2});
  TweenLite.to("grantland", .5, {x:19, alpha:1, delay:3}); // for IE8 it might be better to use left over x here
  TweenLite.to("packshot", 5, {alpha:1, ease:Power4.easeIn});
  TweenLite.to("holiday", 1, {alpha:1, delay:4});
  TweenLite.to("starts", .75, {alpha:1, delay:4.8});
  TweenLite.to("buy", .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5});
}
If you use a string as the target for a tween, it will be passed to document.getElementById (or a custom selector) internally for you. That's likely what you were recommended by GreenSock.

 

If you don't use a string, then you are asking for a javascript variable called container, myfilms etc, which you haven't defined. However, in some browsers (and it's even part of some HTML specs...), id's within an HTML page can automatically generate these variables for you. It's one of those things that whoever implemented it probably wished they didn't. It's not consistently applied between browsers, and it's highly recommended that you avoid it if you want a site that works reliably in all browsers.

 

Either set the variable yourself with document.getElementById (good idea if you are selecting the element multiple times), or use strings for the targets in GSAP.

  • Like 3
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.
×