Jump to content
GreenSock

mikeebee

Disable animation in IE8

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 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
Link to comment
Share on other sites

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});
}
  • Like 2
Link to comment
Share on other sites

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