Disable animation in IE8

[mikeebee 1 Likes (Newbie)]

Hi all!

 

Is it possible to disable animations in IE8?

 

Basically, I've got a site with a ton of animations and in IE8 it's really struggling and the site will be much better off if I disable animations. I still need the results of the animations, just no tweening. Does that make sense?

 

Cheers,

Mike

[Rodrigo 2,662 Likes (Superhero)]

Hi Mike,

 

I can think about two options.

 

First, use the good ol' IE conditional tags after the doctype declaration and add a class to the HTML tag. Then in our code after all the tweens/timelines are created you can use an exportRoot method and set that master timeline's progress to 1.

 

Second, pretty much the same as the previous one but instead of using the conditional IE tag, use modernizr or other feature detection tool to check IE8 and use the same exportRoot route.

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/exportRoot/

// create all your tweens/timelines

/*lots of code here*/


// then check if the html tag has the ie8 class
if( $("html").hasClass("ie8") ) {
  var tl = TimelineLite.exportRoot();

  // take the master timeline to the end in order to force every instance rendering
  tl.progress(1);
}

Also if you want to be selective about which instances you want to render and which ones you don't, you can create an array with all the instances you need to be rendered as the site loads and simply use a set instance:

var tweensArray = [];

// through your code add tweens/timelines to the array



// finally use a set instance to set the progress of those in the array to 1
if( $("html").hasClass("ie8") ) {
  TweenLite.set(tweensArray, {progress:1});
}

[mikeebee 1 Likes (Newbie)]

Perfect! Thanks Rodrigo

[GreenSock 8,117 Likes (Superhero)]

Rodrigo's solution totally works. Here's one more idea: If you're using TweenMax, you can set the globalTimeScale() to a super high value so that basically your animations run REALLY fast (which makes them appear to complete almost immediately):

if ( isIE8 ) {
    TweenMax.globalTimeScale(1000); //plays everything 1000x normal speed
}