Jonathan

glad to help

hello and welcome to the forums, I noticed in your stylesheet, you were applying scale as its own property. try this: .pos1 { -webkit-transform: scale:(1,1) translateZ(0); transform: scale:(1,1) translateZ(0); } notice how the scale goes in the transform property, also i would also use transform without the prefix so its crossbrowser since latest webkit browsers like safari and chrome and also firefox accept transform with out the vendor prefixes. Gsap should handle this when applying, but if you have starting values defined in the stylesheet i would make those changes. also the jsfiddle example is missing the GSAP external script, and i wasnt able to see it work in Firefox

ie8 is more strict and will parse the DOM differently.. but like Rodrigo said, have you contacted Sitefinity?

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?

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!

hello welcome to the forums, try writing the css properties in camelCase ... so margin-left becomes marginLeft TweenLite.to($title,.5,{ css:{ "marginLeft": "20px" } }); // or like this TweenLite.to($title,.5,{ css:{ marginLeft: 20 } }); even though i didnt include px ,, it is the default so 20 is the same as "20px" http://jsbin.com/ePOTAFi/1/edit?html,output

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

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

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

Hello.. I would opt for the scroll event versus the ticker event in this case. Since the ticker event will keep firing even when not scrolling... versus the scroll event, which would only fire when scrolling. This way you are not firing events when they are not needed. Also you could use native Javascript like this: // Setup Scroll Events function setupScrollEvents() { processTimeline(); } window.onscroll = setupScrollEvents;

Thanks Carl.. After some more tests... I edited and updated the above to also just target the element being animated. Also I have added a check using object feature detection, if anyone wants to just apply the hack to Firefox Mobile Browser.

Looks like Jamie is right.. in my tests on PC XP real IE8.. i noticed that IE8 doesn't understand the get shorthand background-position, but it understands the set of shorthand background-position. But i will test with latest version of GSAP, and check Jamie's examples on my PC XP real IE8. Also i know that IE7 and below doesn't support the shorthand property.. but it does support background-position-x and background-position-y. As far as IE8, i noticed that even with jQuery it doesn't understand getting or setting shorthand background-position, but understands the background-position-x and background-position-y. And there are still bugs from 5 years ago waiting to get fixed for jQuery and IE8. But with jQuery 2.0 out now, it has dropped support for IE 6, 7, and 8. But like Jamie has shown, GSAP has NO problem getting around the pain in the neck, that is IE.

Hello I was dealing with an issue in Firefox Mobile Browser, where it would not honor overflow hidden when 3d transforming its child. So the parent that had overflow hidden, would have its childs 3d transforms display outside the parents bounds. There is an opacity: 0.99 hack that you can add to the parent your transforming, but in some instances it will cause the layout to get pushed down, and is very very frustrating to debug. .targetElementThatHas3dTransforms { opacity: 0.999; } Firefox Mobile Browser does not honor overflow hidden when using or animating 3d transforms on its child. So i came up with another hack which i find that worked. Apply this to your style sheet: * { outline: 1px none transparent; } I also did some other tests, and found out that if you add this to the element your animating, that uses 3d transforms.. it should also fix that overflow hidden bug: .targetElementThatHas3dTransforms { outline:1px none transparent; } Also if you want to apply via javascript and only apply on FireFox Mobile Browser you can do this: // check for FireFox var isFF = !(window.mozInnerScreenX == null); // check for mobile touch support var isTouch = ('ontouchstart' in document.documentElement); // check for FireFox Mobile Browser (FireFox and Mobile Touch) if(isFF && isTouch){ TweenMax.set($('.targetElementThatHas3dTransforms'),{'outline':'1px solid transparent'}); } I found out the Desktop version of Firefox doesnt like the outline on the element that has the 3d Transforms. And animates slow and blocky in some cases, So above we only add the hack when in Mobile view.. from what i noticed in my tests. This solved the Firefox Mobile Browser overflow hidden bug. Im not sure why the Firefox Mobile browser behaves this way. But I thought i would share this, so if anybody runs in to this same issue, it can provide some help.

Hello all... i edited the above code, so it checks when it is IE and if addEventListener exists.. otherwise it will use attachEvent. IE8 doesn't like addEventListener so it will use attachEvent. I could have just checked if it was IE8 since IE8 and below doesnt support addEventListener.. but its best to check the window object if addEventListener is supported. You could just use the JQuery - $(window) .. but I have found IE to fire multiple times, sometimes in a endless loop in IE.. so i opted to check for addEventListener and attachEvent. IE is a pain...

Hello This is NOT a GSAP TweenMax bug, but is a bug in IE8. IE8 does not understand the shorthand background-position property, and it returns undefined. It does however accept background-position-x and background-position-y. Its probably best to just target the background-position-x and background-position-y properties separate so you cam avoid IE8 returning undefined. Or you could check if its IE8, and then apply like this: // check if not IE8 if(document.documentMode === undefined || document.documentMode > 8){ // for firefox, chrome, no IE browsers tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); } else { // for IE browsers tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); } Also maybe just having a variable for the css object var cssObject; // check if not IE8 if(document.documentMode === undefined || document.documentMode > 8){ // for firefox, chrome, no IE browsers cssObject = {'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px'}; } else { // for IE browsers cssObject = {'backgroundPosition':'-17px -4px'}, } tl.to(flame, 0, {css:cssObject}, .1); I believe, not sure though, that IE9 and IE10 support the shorthand background-position property, so the above checks if its anything IE8 and below. I hope this helps

Just so i clarify when i was talking about hardware acceleration, i was referring to how hardware acceleration allows the browser to offload the graphics rendering from the CPU (processor) to the GPU (graphics card).. which like Jack said has nothing to do with WebGL. And please correct me if im wrong Jack, thanks

Sweet hack Carl! I got around this same chrome bug awhile back by applying the below to the stylesheet on the element i was scaling. Its similar to Carl's hack, but instead it is applied on the target element when the style sheet is loaded: #targetElement { transform: scale(1) rotate(0deg) translate3d(0, 0, 0.1px); } by having the translate3d in the transform property, it will trigger hardware acceleration if the browser supports it, when the style sheet is loaded. And the 0.1px in the Z value will offset the element slightly to fix chrome's jerkiness.

Hello.. why not remove the display:inline-block property completely from your rect div's. And add float:left to your boxes so they position inline without using inline-block, since display inline-block is buggy in IE, and has some other issues in chrome. Then add a child div within each of your rect1, rect2, and rect3 div's. And then zoom out that child div instead. So this way the rect div's will keep their position, and the child div itself will do the zooming. Basically you will keep the positioning of the rect divs separate from its child, which will be doing the animated zoom out ...just a thought!

Hello, I tested your jsfiddle on Android 4.1.2 - Samsung Galaxy S3 ... on stock browser, and Google Chrome mobile browser. And didn't see any differences in the first or 2nd time it runs. Samsung Galaxy S3 Model Number: SCH-I535 Android Version: 4.1.2 Jelly Bean Like Rodrigo said its probably a hardware issue and not anything with GSAP. What are the hardware specs for your device? Like Android Version and Build number?

i was dealing with this same issue on a project im working on. with different animation timelines either getting out of sync or not animating right once i went to a different tab or window. My solution to get around this was to add events that listen to when i leave the page and return. So i can check when the current window/tab loses focus or gains focus: var focused = true; // check if browser tab / windows has focus if(document.documentMode === undefined){ // events for Chrome, Firefox, other non IE (jQuery way) $(window).on("focusin", function() { focused = false; // timeline resume or ticker addListeners stuff goes below timeline.resume(); }).on("focusout", function() { focused = true; // timeline pause or ticker removeListeners stuff goes below timeline.pause(); }); } else { // check if addEventListener exists otherwise use attachEvent if (window.addEventListener){ // events for IE window.addEventListener("focus", function(event) { focused = false; // timeline resume or ticker addListeners stuff goes below timeline.resume(); }, false); window.addEventListener("blur", function(event) { focused = true; // timeline pause or ticker removeListeners stuff goes below timeline.pause(); }, false); } else { // events for IE window.attachEvent("focus", function(event) { focused = false; // timeline resume or ticker addListeners stuff goes below timeline.resume(); }); window.attachEvent("blur", function(event) { focused = true; // timeline pause or ticker removeListeners stuff goes below timeline.pause(); }); } } After i added this, my animations pause when the tab lose focus, and when i come back to the tab.. my animations resume when the tab/window has focus again.. So i now i don't have my animation timelines going out of sync when i come back to the tab / window. Side Note: I edited the above and added check so it applies the events for cross browser. IE has a different event, do to its issues with the jquery $(window) object, which tries to fire it in IE, in a endless loop. I hope this helps!

Great code pen Carl !!! the :hover and :after pseudo classes trigger the transition of the transform property. also the css animations are triggered to animate the box-shadow and opacity on the :hover pseudo class as well.,, looks like he created 2 :hover pseudo selectors to separate his css transitions from his css animations. the animation shorthand property is: animation: sonarEffect 1.3s ease-out 75ms; // values are animation: <keyframe name> <time/duration> <easing> <time/delay>; when using the animation shorthand property the 2nd 'time' value is used as the delay. but COOL css to GSAP codepen Carl

Thanks for clarifying Carl.. much appreciated!

Hello all... i had a couple questions about clear and kill methods: What is the difference between using clear(), versus one of the kill methods and/or clearProps? Is the clear() method faster, and just clears a timeline? ...versus using one of the kill methods, or clearProps on a individual basis? Also is clear() better than using killAll()? thanks ahead of time for any clarification?

when using IE10 .. the default is IE10 (standards). when viewing or selecting the different document modes don't choose any of the compatibility modes. The compatibility modes will not render correctly. If you are testing those document modes, make sure you choose the standards mode. So you can get more accurate rendering. When I test Windows 7.. rendering in IE10 in the document mode IE8 (IE8 standards mode) .. it renders the same as Windows XP, real IE8 .. IE8 standards. I tested on both windows 7 and xp.. and it works... so im guessing you are viewing in IE10 (IE8 - IE8 compatibility mode) .. instead of (IE8 - IE8 standards mode).. compatibility mode will make websites look awful and not function right.. make sure in your IE settings under the tools menu that compatibility websites is unchecked for internet and intranet sites.. also when choosing rendering modes, never select any compatibility mode, always test for standards mode so you know, you get an accurate rendering. compatibility modes in IE are supposed to make older sites, and badly written non standards html look good.. but actually it causes issues and make sites look and function bad.. never use any compatibility mode. I hope that helps

Welcome to the forums! You can put your code in the HEAD tag.. But you are trying to play the timeline before the all assets have been loaded: <html> <head> <script src="http://cdnjs.cloudfl...TweenMax.min.js"></script> <script type="text/javascript"> window.load = function(){ var timeline = new TimelineMax({paused:true}); timeline.to("#title", 2, {color:"#0FF", fontSize:"48px"}); timeline.play(); console.log("yes it runs... when all images, links and assets have loaded"); }; console.log("runs immediately"); </script> </head> <body> <div id="title">This is growing title</div> </body> </html> if you are using jQuery you can use the document ready method which waits until the DOM is ready: $(document).ready(function(){ // Your code here }); and for the window onload event: // using native javascript window.onload = function(){ // your code here }; // is the same as this using jQuery $(window).on('load',function(){ // your code here }); i hope this helps!