Jump to content
Search Community

Animation not repeating in IE8

Vincentccw 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

I'm using this simple code to make my div button fade in and off automatically and it suppose to repeat itself.......

 

var tl = new TimelineMax({repeat:-1});
tl.from($('#slideScrollBtn'), 1, {autoAlpha:0})
  .from($('#slideScrollBtn'), 1, {autoAlpha:1,ease:Power1.easeOut});
 
it works fine in chrome and firefox but when I tested in IE8 the animation works fine in the first 2 rounds then it stuck. Where did I go wrong?
Link to comment
Share on other sites

Hi and welcome to the forums.

 

The first thing that draws my attention from your code is the fact that you're making two from calls on the same object and on the same property. I believe that is to create a pulsating effect, in that case use the yoyo property, like this:

var tl = new TimelineMax({repeat:-1, yoyo:true});

tl.from($('#slideScrollBtn'), 1, {autoAlpha:0, ease:Power1.easeOut});

As for why is getting stuck on IE8 it worked fine when I tested it, could you please create a simple fiddle or codepen in order to get a better look.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

I tested code very similar to yours in IE8 and did not see any problems. It repeated fine:

 

var tl = new TimelineMax({repeat:-1});
  tl.from("div", 1, {autoAlpha:0})
    .from("div", 1, {autoAlpha:1,ease:Power1.easeOut});

IE8 Test page:

http://codepen.io/GreenSock/full/4e30537253451724110db212e196bba4

 

Full Codepen editor view:

http://codepen.io/GreenSock/pen/4e30537253451724110db212e196bba4

 

*note the codepen editor doesn't work in IE8. But you can still fork the code from the second link and test in a "full page" view that is IE8 compliant. 

 

If we can see what isn't working in IE8 it will greatly help us assist you.

 

I'm testing in IE8 on Win7

 

Also, are you using real IE8 or the "simulated" IE8 browser mode that IE9+ allow?

Link to comment
Share on other sites

Hi and welcome to the forums.

 

The first thing that draws my attention from your code is the fact that you're making two from calls on the same object and on the same property. I believe that is to create a pulsating effect, in that case use the yoyo property, like this:

var tl = new TimelineMax({repeat:-1, yoyo:true});

tl.from($('#slideScrollBtn'), 1, {autoAlpha:0, ease:Power1.easeOut});

As for why is getting stuck on IE8 it worked fine when I tested it, could you please create a simple fiddle or codepen in order to get a better look.

 

Hope this helps,

Cheers,

Rodrigo.

 

Hi Rhenando, thanks for the help first of all:

 

Here is the original link to my site, the one I'm animating is the "scroll to bottom" button on the right :

http://wthdesign.net/website/ideas/html/index.php

 

I think codepen isn't working properly in IE8, but I have uploaded the code as well for your debugging purposes:

See the Pen KaCiI by vincentccw (@vincentccw) on CodePen

 

I have tried using the yoyo property like you mentioned, it does provide a better animation quality in IE8. The animation will repeat itself few times without any problems, but once it reaches a certain times it flickers for a second then back to normal again. (I think it is the best IE8 can handle  :? )

Link to comment
Share on other sites

I tested code very similar to yours in IE8 and did not see any problems. It repeated fine:

 

var tl = new TimelineMax({repeat:-1});
  tl.from("div", 1, {autoAlpha:0})
    .from("div", 1, {autoAlpha:1,ease:Power1.easeOut});

IE8 Test page:

See the Pen 4e30537253451724110db212e196bba4 by GreenSock (@GreenSock) on CodePen

 

Full Codepen editor view:

See the Pen 4e30537253451724110db212e196bba4 by GreenSock (@GreenSock) on CodePen

 

*note the codepen editor doesn't work in IE8. But you can still fork the code from the second link and test in a "full page" view that is IE8 compliant. 

 

If we can see what isn't working in IE8 it will greatly help us assist you.

 

I'm testing in IE8 on Win7

 

Also, are you using real IE8 or the "simulated" IE8 browser mode that IE9+ allow?

 

Hi thanks for the help  :-P

 

I have uploaded the code(the button is on the right side):

http://wthdesign.net/website/ideas/html/index.php

 

I have also uploaded into codepen (but i think it doesnt work in my IE8):

See the Pen KaCiI by vincentccw (@vincentccw) on CodePen

 

I'm using real IE8 in window7 also.

 

If you check it in IE8, the animation will flickr/delay before each repetition, but like rhernando mentioned, if i replaced with yoyo property, it does provide better repetition but it still flickr/delay at some point...

Link to comment
Share on other sites

Hmm I'm just testing in IE9 with IE8 document mode, but I think I can see what you are talking about. It seems that occasionally the 'fade in' isn't visible, and you just see the image 'pop' in and then fade out, but it's not happening often and I've not seen it stop completely yet. It's like the visibility property sometimes gets stuck and doesn't change until opacity is 1.

 

I wonder if the visibility toggle on -> off -> on for a split second at the and of the fade out is causing IE8 to choke somehow. Since you don't really need the benefit of a visibility toggle in this effect, could you try changing autoAlpha to opacity and seeing if that has any effect on this?

 

(also it seems like full view in Codepen might not be working so well in IE anymore (even IE9))

  • Like 2
Link to comment
Share on other sites

Hi,

 

Well the codepen is working because that code shouldn't have any problems in any browser. In your site there is an irregular pulse on the scrolldown element, so my assumption is that something else is causing this.

 

Checking your code my first suggestion will be to get rid (comment out) everything but JQuery and GSAP, but already my major suspects are the following:

<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

Because in IE9 and IE10 it works fine so something is happening when IE is older than 9 and that is also when this two scripts are loaded.

 

Make a test getting those conditionals out of the code  as well as my previous suggestion and let us know how it went.

 

Also since you're working with modernizr, why don't you use YepNope to conditionally load those files?.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

(also it seems like full view in Codepen might not be working so well in IE anymore (even IE9))

 

Yep they're making some changes (the embed one is great!!) and I had some problems testing on every IE except for 10 the last few days. In fact I'm having some problems with full window in IE7 and IE8 on oracle virtual box.

  • Like 1
Link to comment
Share on other sites

Hmm I'm just testing in IE9 with IE8 document mode, but I think I can see what you are talking about. It seems that occasionally the 'fade in' isn't visible, and you just see the image 'pop' in and then fade out, but it's not happening often and I've not seen it stop completely yet. It's like the visibility property sometimes gets stuck and doesn't change until opacity is 1.

 

I wonder if the visibility toggle on -> off -> on for a split second at the and of the fade out is causing IE8 to choke somehow. Since you don't really need the benefit of a visibility toggle in this effect, could you try changing autoAlpha to opacity and seeing if that has any effect on this?

 

(also it seems like full view in Codepen might not be working so well in IE anymore (even IE9))

 

Thanks, I have replace autoalpha with opacity and magically it works!! IE8 doesn't chock even once.  :-P

  • Like 1
Link to comment
Share on other sites

Hi,

 

Well the codepen is working because that code shouldn't have any problems in any browser. In your site there is an irregular pulse on the scrolldown element, so my assumption is that something else is causing this.

 

Checking your code my first suggestion will be to get rid (comment out) everything but JQuery and GSAP, but already my major suspects are the following:

<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

Because in IE9 and IE10 it works fine so something is happening when IE is older than 9 and that is also when this two scripts are loaded.

 

Make a test getting those conditionals out of the code  as well as my previous suggestion and let us know how it went.

 

Also since you're working with modernizr, why don't you use YepNope to conditionally load those files?.

 

Hope this helps,

Cheers,

Rodrigo.

 

I get rid of the html5 shim and media query links but still not working properly but I think is alright since it has already been solve though by changing the property from autoalpha to opacity.

 

I didn't know you can conditionally load files using modernizr , thanks for the suggestion, I'll definitely look into it  :mrgreen:

Link to comment
Share on other sites

I get rid of the html5 shim and media query links but still not working properly but I think is alright since it has already been solve though by changing the property from autoalpha to opacity.

 

I didn't know you can conditionally load files using modernizr , thanks for the suggestion, I'll definitely look into it  :mrgreen:

 

Glad that Jamie nailed this one and you got it working.

 

Yes modernizr usually comes with yepnope (you have to check the customization you do), so you make a test to detect IE8 and IE7 (css 2d transforms) and if the test fails you load the files. You add the rest of your scripts the usual way and create that condition to load the others, like this:

Modernizr.load({
  test: Modernizr.csstransforms,
  nope: ['http://html5shim.googlecode.com/svn/trunk/html5.js','http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js']
});

Note that you can load them as an array. Is important though that you add this script on the head section of your document just like you do with the conditionals. Also check modernizr's documentation because it also supports media queries, in case you need some special scripting for smaller screen sizes.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

 

Glad that Jamie nailed this one and you got it working.

 

Yes modernizr usually comes with yepnope (you have to check the customization you do), so you make a test to detect IE8 and IE7 (css 2d transforms) and if the test fails you load the files. You add the rest of your scripts the usual way and create that condition to load the others, like this:

Modernizr.load({
  test: Modernizr.csstransforms,
  nope: ['http://html5shim.googlecode.com/svn/trunk/html5.js','http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js']
});

Note that you can load them as an array. Is important though that you add this script on the head section of your document just like you do with the conditionals. Also check modernizr's documentation because it also supports media queries, in case you need some special scripting for smaller screen sizes.

 

Cheers,

Rodrigo.

 

Thanks Rhernando, will update my code right away  :-P

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