Jump to content
Search Community

IE8 help

retropunk 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

Hello guys, I posted a similar post in the wrong section earlier

This JS code works great everywhere except IE8

//
function getElem(id){ return document.getElementById(id); }
var seq = new TimelineLite( {onComplete:onTweenComplete, delay:.1} );
seq.append( TweenLite.to(getElem('header'), .4, {css:{alpha:1}}) );
seq.append( TweenLite.to(getElem('tabs'), .4, {css:{alpha:1}}) );
seq.append( TweenLite.to(getElem('footer'), .4, {css:{alpha:1}}) );
seq.append( TweenLite.to(getElem('contentDiv'), .5, {css:{alpha:1}}) );
seq.play();
function onTweenComplete(){ console.log("tween done"); }
//

 

Thanks for the help

Link to comment
Share on other sites

It doesn't seem to be listening to the tween at all.

I am going to look at the rest of the code in the site and see if I can pin point any other animations.

If I can't find it I will come back for more help. I wanted to make sure I wasn't implementing the JS/CSS code wrong. I inherited an HTML site and I am learning as I go here.

 

So can I do this in JS? Or is it better to do in CSS as a general rule?

TweenLite.to(image, 1, {alpha:0});

 

Thanks

Link to comment
Share on other sites

Yes, you definitely need to use the CSSPlugin to control the alpha. Remember, TweenLite will tween any property of any object, so the way you wrote that tween would literally try to set the "alpha" property of your image object (image.alpha = 0.5) but there is no such thing as an alpha property directly on an HTML <img> element. See what I mean? In order to control the opacity of an element, you must use css like image.style.opacity = 0.5 but even that doesn't work in all browsers which is why CSSPlugin implements some fancy footwork behind the scenes to sense if it is IE and if so, it'll apply the IE-specific filter (blah, blah, blah). The point is that to handle certain properties in non-standard ways, you need to use a plugin. Plugins are what do the fancy footwork.

 

Make more sense?

 

Please download the latest version of the platform in JS and make sure you're writing your tween like this:

 

TweenLite.to(image, 1, {css:{alpha:0}}); 

 

And keep in mind that you can use autoAlpha if you want to have it automatically set visibility:hidden when opacity hits 0. That'll make it so that your object can't receive mouse interaction too (this can be a nice benefit).

Link to comment
Share on other sites

oh ok, I see now. This is making way more sense. autoAlpha is definitely the way to go too. Thanks for that. So awesome

 

FYI - I've inherited this massive HTML/JS site and it's not exactly the greatest build. I've been tasked with "optimizing it"

So I am starting by swapping out all the animations with GSAP. So far its been working perfect, I'm learning alot and the lines of code have reduced drastically. It makes me feel comfortable to see TweenLite when I am in the depths of HTML5 hell! :)

On this app the GS animations play perfectly everywhere but IE8. So I went back into the SVN and sure enough I see that even the previous versions alpha/opacity animations aren't working in IE8! UGH!

I did a simple test outside of the app and of course tweening the alpha works just fine in IE8.

 

Browser fragmentation is so damn annoying, I feel like I am going backwards in time! I can only imagine what you go through to make sure this all works in all browsers. Yikes.

 

 

Anyways, something must be overriding the filters like you said. I am going to work on it this weekend and see if I can figure it out on my own.

If I can't find it I will reach out again.

 

Thanks again Jack

Link to comment
Share on other sites

Yeah, man, I feel your pain. Browser differences are the biggest pain in the neck by far. You should see the work that had to go into making transforms (like rotation, scale, skew, etc.) work in IE7-8. Anyway, I'm glad to hear GSAP is helping you optimize your site and make your code more concise. Let us know if you run into anything else. And again, I'd definitely recommend downloading the latest version of the GSAP files (they were updated today).

 

Happy tweening.

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