Jump to content
Search Community

Compatible with ie8?

bcaz 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

Hi and welcome to the forums.

 

GSAP is indeed compatible all the way back to IE6 so it works with IE8.

 

The thing is that to make some animations work in IE8 you have to add some quirks. If my memory doesn't fails to rotate and scale an element this must be inside an absolute positioned element. There are some issues with child elements when the parent is being animated and the alpha channel in PNG-24 images doesn't have any workaround yet.

 

It'll be very helpful if you could set up a codepen or fiddle with the code that's giving you problems in order to take a better look.

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hi,

 

Any particular reason why the entire main container is inside a form tag? perhaps that could be the issue. Sorry if I'm being ignorant but it's the first time I've seen this.

 

In terms of the animations there has to be something else since you're not trying anything too fancy, which is great for IE8 and older. The tweens you're setting should work without any problem in IE8 so the issue must be elsewhere in your code.

 

Also a few hints, the css{} wrapper is no longer mandatory, unfortunately the superscrollorama documentation doesn't mention this, and by default any from and fromTo tween instance has immediateRender:true so there's no need to add that in the tween vars either.

 

What you could do is to isolate just the tweens in a simple page to see hot that works and from there start adding the rest of the site's features in order to see what's causing the problems.

 

Best,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

as i looked in that page in real IE8 on windows XP PC.. i saw that same error.. if you look closely in that error and step into it , it looks like it shows this:

throw"Cannot add "+r+" into the timeline; it is neither a tween, timeline, function, nor a string.";

so you might want to check your code and see what is trying to get added into the timeline.

 

also a side note..  i noticed that the head tag has an iframe in it.. pixel.fetchback

  • Like 1
Link to comment
Share on other sites

i am unsure what it is  .. but when i inspect the script it shows that it is  'FetchBack Pixel Loader' .. looks like some marketing or tracking script.

 

I tried googling it and did not see anything about it.. looks like this company owns that script.. http://www.ebayenterprise.com/marketing_solutions/display_retargeting/ ... so i followed it to ebayenterprise.com  ... and looks like ebayenterprise.com was formally GSI (GSI Commerce Solutions) .. which was bought by ebay...

 

so my question is .. is your site using Magento or anything from x.com?

 

looks like that iframe is getting inserted in the head instead of the body... that might be causing some issue in IE8 but ,, i would still check out what is being added to the timelines that might be causing an issue in IE8

Link to comment
Share on other sites

Nope not using Magento that I know of...

i am unsure what it is  .. but when i inspect the script it shows that it is  'FetchBack Pixel Loader' .. looks like some marketing or tracking script.

 

I tried googling it and did not see anything about it.. looks like this company owns that script.. http://www.ebayenterprise.com/marketing_solutions/display_retargeting/ ... so i followed it to ebayenterprise.com  ... and looks like ebayenterprise.com was formally GSI (GSI Commerce Solutions) .. which was bought by ebay...

 

so my question is .. is your site using Magento or anything from x.com?

 

looks like that iframe is getting inserted in the head instead of the body... that might be causing some issue in IE8 but ,, i would still check out what is being added to the timelines that might be causing an issue in IE8

Link to comment
Share on other sites

Try searching in your site files for the word 'fetchback' to see where it is being run from. Then you can have a better idea on how its being inserted in the page.

 

Also check the JavaScript files that are using GSAP, and see what is being added to the timeline, and post that code here so we can see how your tween or timeline is setup..

Link to comment
Share on other sites

Hi,

 

Have you contacted Sitefinity regarding this?.

 

It would be very good to know if something they do, in order to secure browser compatibility, might be causing this, because according to what Jonathan reported in reply #7 the engine is throwing that error when that +r+ element is being added, but there's nothing in MasterTrainer.js with that name. Also if the error was in the original code, the problem would appear in every browser and that's not the case.

 

Also, like I said before, since you're creating very simple animations there shouldn't be a major problem even in IE7, so since it works in IE9 and 10, chrome, safari (5 for windows 7) and firefox the problem has to be elsewhere. Maybe in sitefinity they can guide you on how you can work with this or help you inject GSAP into they platform.

 

Jonathan, thanks a lot for lending a hand and reporting the error. Here is the link to the JS where the tweens are being added to superscrollorama:

http://www.nasm.org/Sitefinity/WebsiteTemplates/MasterTrainer/JS/MasterTrainer.js

 

Best,

Rodrigo.

Link to comment
Share on other sites

Thanks Rodrigo.. I looked at this code from the MasterTrainer.js link above..

 

Please correct me if im wrong ...

 

this is what i noticed.. so when declaring fromTo.. shouldn't any special properties come after any css properties in the end so write now its shows this:

parallax.addTween(200, TweenMax.fromTo(sportsPerCirlce, 1.05,
		{ css: {opacity:0},immediateRender:true},
		{ css: { opacity: .3 } }),
0, 0, false);

shouldn't the immediateRender:true come after the 2nd css object:

parallax.addTween(200, TweenMax.fromTo(sportsPerCirlce, 1.05,
		{ css: {opacity:0}},
		{ css: { opacity: .3 },immediateRender:true }),
0, 0, false);

also i noticed that some of the selectors as the target in some tweens are using :nth-child which is not supported in IE8.. but GSAP should be able to understand the :nth-child selector, even if the browser is IE8..

 

please correct me if im wrong! Thanks!

Link to comment
Share on other sites

Then the only thing i can think of is that iframe that is in the head tag. When i profile the page i dont even see that iframe loading as an js asset.

 

also when inspecting further in IE8 i do notice that it also throws strict error for immediateRender..

reference to undefined property this.vars.immediateRender

so im not sure  why IE8 would throw that unless superscrollorama is doing something with the special properties order?

Link to comment
Share on other sites

i dont know this will help but in the MasterTrainer.js is using a window load event..

 

for IE8 its best to use :

window.load = function(){
    // code would go here
};

I dont know if that would help .. but you could test if you still get that error with the above window.load..

 

Im not sure, but maybe IE8 is not firing the window load event properly since it does have issues with the jQuery window object $(window). I have had issues with IE8 not loading the assets right and them being ready to use

 

Also you could add a DOM ready event handler around the window.load so your also checking when the DOM is ready

$(document).ready(){
     window.load = function(){
        // code would go here
     };
});

Just a thought .. do some tests and see if using the window.load event and the DOM ready help in your tests in IE8..

 

this way you can see if that might be causing any issues..

Link to comment
Share on other sites

No, because the developer who did the site IS from Sitefinity...lol....

Well that's a very good reason to contact them, specially if you're paying for a service. That's customer service 101.

 

Also if I delete mastertrainer.js, I don't get the error message anymore...

Yes that is expected, but not because it has something to do with GSAP, but because you're removing the code that's being broken.

 

The error reported by IE8 comes from this particular piece of code in TweenMax.js:

p.add = function(value, position, align, stagger)
{
    var curTime, l, i, child, tl, beforeRawTime;
if (typeof(position) !== "number")
    {
	position = this._parseTimeOrLabel(position, 0, true, value);
    }
    if (!(value instanceof Animation))
    {
	if (value instanceof Array)
        {
	    align = align || "normal";
	    stagger = stagger || 0;
	    curTime = position;
	    l = value.length;
	    for (i = 0; i < l; i++)
            {
		if ((child = value[i]) instanceof Array)
                {
		    child = new TimelineLite({tweens:child});
		}
		this.add(child, curTime);
		if (typeof(child) !== "string" && typeof(child) !== "function")
                {
		    if (align === "sequence")
                    {
		    	curTime = child._startTime + (child.totalDuration() / child._timeScale);
		    } else if (align === "start")
                    {
			child._startTime -= child.delay();
		    }
		}
		curTime += stagger;
	    }
	    return this._uncache(true);
	} else if (typeof(value) === "string")
        {
	    return this.addLabel(value, position);
	} else if (typeof(value) === "function") 
        {
	    value = TweenLite.delayedCall(0, value);
	} else 
        {
	    throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string.");
	}
    }

AS you can see this is basically the add method, I'm not going into further details because is outside the scope of this post. In your code all the add methods are handled by superscrollorama via addTween. What the error is indicating is that the code is trying to add something to the timeline that is not supported by GSAP , so to speak.

 

Since this happens only in IE8 it has to be something done by stiefinity to secure compatibility with IE8 and older.

 

If you isolate the code of mastertrainer.js and create a simple webpage the old-fashion way you'll see that the code works in IE8, if you check superscrollorama's home page in IE8 you'll see that it works:

 

http://johnpolacek.github.io/superscrollorama/

 

As you can see this is not a GSAP related issue, the engine works in IE8 even considering the fact that is probably one of the worst browsers ever and there are a lot of posts in the forums regarding issues with it. Also I always work with fallback scripts for IE8 and older and I stay away, as much as possible, from rotations and scales, which is the case of your code. That's why since my second reply I've stated that the issue is not GSAP related. You should definitely contact Sitefinity.

 

Best,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hi--thanks for your response.  There is quite a bit of code so I have pasted the url instead:  http://bit.ly/164ZbfL

 

Hi,

 

I just saw the demo... The website looks great! The one thing missing ( you will probably implement it ) is the smooth scrolling between sections and the selection of the menu on scroll. I wrote such a functions a couple of weeks ago ( demo : http://kabakum.panayotov-consult.com/bst2/ ) just to play with the effect... If you want to keep things simple and implement such a behaviour ( smooth scroll / select menu on scroll ) without external plugins, just drop me a line :)

Link to comment
Share on other sites

Well that's a very good reason to contact them, specially if you're paying for a service. That's customer service 101.

 

Yes that is expected, but not because it has something to do with GSAP, but because you're removing the code that's being broken.

 

The error reported by IE8 comes from this particular piece of code in TweenMax.js:

p.add = function(value, position, align, stagger)
{
    var curTime, l, i, child, tl, beforeRawTime;
if (typeof(position) !== "number")
    {
	position = this._parseTimeOrLabel(position, 0, true, value);
    }
    if (!(value instanceof Animation))
    {
	if (value instanceof Array)
        {
	    align = align || "normal";
	    stagger = stagger || 0;
	    curTime = position;
	    l = value.length;
	    for (i = 0; i < l; i++)
            {
		if ((child = value[i]) instanceof Array)
                {
		    child = new TimelineLite({tweens:child});
		}
		this.add(child, curTime);
		if (typeof(child) !== "string" && typeof(child) !== "function")
                {
		    if (align === "sequence")
                    {
		    	curTime = child._startTime + (child.totalDuration() / child._timeScale);
		    } else if (align === "start")
                    {
			child._startTime -= child.delay();
		    }
		}
		curTime += stagger;
	    }
	    return this._uncache(true);
	} else if (typeof(value) === "string")
        {
	    return this.addLabel(value, position);
	} else if (typeof(value) === "function") 
        {
	    value = TweenLite.delayedCall(0, value);
	} else 
        {
	    throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string.");
	}
    }

AS you can see this is basically the add method, I'm not going into further details because is outside the scope of this post. In your code all the add methods are handled by superscrollorama via addTween. What the error is indicating is that the code is trying to add something to the timeline that is not supported by GSAP , so to speak.

 

Since this happens only in IE8 it has to be something done by stiefinity to secure compatibility with IE8 and older.

 

If you isolate the code of mastertrainer.js and create a simple webpage the old-fashion way you'll see that the code works in IE8, if you check superscrollorama's home page in IE8 you'll see that it works:

 

http://johnpolacek.github.io/superscrollorama/

 

As you can see this is not a GSAP related issue, the engine works in IE8 even considering the fact that is probably one of the worst browsers ever and there are a lot of posts in the forums regarding issues with it. Also I always work with fallback scripts for IE8 and older and I stay away, as much as possible, from rotations and scales, which is the case of your code. That's why since my second reply I've stated that the issue is not GSAP related. You should definitely contact Sitefinity.

 

Best,

Rodrigo.

Thanks for you help.  It's kinda of a complicated situation--which I won't go into - but I really do appreciate your help and will look into this further.  Thanks!

Link to comment
Share on other sites

i dont know this will help but in the MasterTrainer.js is using a window load event..

 

for IE8 its best to use :

window.load = function(){
    // code would go here
};

I dont know if that would help .. but you could test if you still get that error with the above window.load..

 

Im not sure, but maybe IE8 is not firing the window load event properly since it does have issues with the jQuery window object $(window). I have had issues with IE8 not loading the assets right and them being ready to use

 

Also you could add a DOM ready event handler around the window.load so your also checking when the DOM is ready

$(document).ready(){
     window.load = function(){
        // code would go here
     };
});

Just a thought .. do some tests and see if using the window.load event and the DOM ready help in your tests in IE8..

 

this way you can see if that might be causing any issues..

I will try this!  Thanks!

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