Jonathan

Hello and welcome to the GreenSock Forums! If possible could you provide like a limited codepen or jsfiddle so we better help you to see your code in context in a live editable environment.. or a link to your webpage that is giving the problem. It will help us better in helping you! Also are you seeing this issue in real standalone IE9? .. or is this happening in a different rendering mode in a different version of IE? browser support for SVG: http://caniuse.com/svg thx

Hello and welcome to the GreenSock Forums! Looks like you are asking about CSS linear-gradients used in CSS image-masks: browser support for image-masks: http://caniuse.com/css-masks browser support for gradients: http://caniuse.com/#feat=css-gradients Looking at the support chart links above you can see that Browser Support for CSS image-masks is NOT well supported in all the modern web browsers. If the CSS property is available in the browser than GSAP can animate it! GSAP uses its awesome CSSPlugin to animate CSS properties. http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html In CSS3, CSS Linear Gradients don't support CSS transitions yet (even though the W3C spec says they should. But each browser applies the spec differently.). If you want a fade-in effect with a gradient, you have to set an opacity on the parent container and transition / animate the opacity of the parent container. But since the browsers are updating every month like Firefox, hopefully we have a consistent gradient spec and syntax real soon. Of course, Jack and Carl, can better clarify regarding support for animating CSS linear-gradients inside CSS image-masks. hope this helps

failure13 In the example that you commented DOES NOT WORK.. i noticed that the var is hd4, not the hd2 variable that is being used in the portion you said does not work. or am i wrong and you forget to post all the code thx

Hello.. I had posted these before but i guess since we are sharing snippets, i figured i put these browser checks here so they are in one place for easy access: If you need to check Firefox, IE, Chrome, Opera 18+, and Touch Support.. without checking the user agent, which can be spoofed... Of course you could use Modernizr. But sometimes you just need less code to check for what browser is what.. To target if the browser is Chromium based, use this: // this targets Google Chrome and Opera 18+ var isChromium = window.chrome; if(isChrome === true) { // is chromium based browser } else { // not chromium based browser } To target if the browser is Google Chrome, use this: var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Google Inc.") { // is Google chrome } else { // not Google chrome } To target if the browser is Opera 18 or above: var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Opera Software ASA") { // is Opera 18 or above } else { // not Opera 18 or above } Checking if Firefox: // check if Firefox var FF = !(window.mozInnerScreenX == null); if(FF) { // is firefox } else { // not firefox } Checking if IE and IE versions: // check if IE8-11 var hasDocumentMode = (document.documentMode !== undefined), isIE8 = (isDocumentMode === 8), isIE9 = (isDocumentMode === 9), isIE10 = (isDocumentMode === 10), isIE11 = (isDocumentMode === 11); if(hasDocumentMode) { if(isIE11){ // browser is IE11 } else if(isIE10){ // browser is IE10 } else if(isIE9){ // browser is IE9 } else if(isIE8){ // browser is IE8 } } If you really need to detect IE7, check for document.attachEvent: // check if IE7 var isIE7 = (document.attachEvent !== undefined); if(isIE7) { // browser is IE7 } else { // browser NOT IE7 } Checking for Touch support: // check if browser has touch support var hasTouch = !!("undefined" != typeof document.documentElement.ontouchstart); if (hasTouch) { // has touch support } else { // does NOT have touch support } I hope these help!

Hello fellow GreenSockers.. Instead of using text-stroke that is still not fully supported in browsers.. why not use text-shadow to fake text-stroke! http://caniuse.com/css-textshadow https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow See this mimicking text-stroke with multiple text-shadows in CSS http://codepen.io/jonathan/pen/qKAft Then use GSAP to animate multiple text-shadows since its supported better than text-stroke Hope this gives some ideas UPDATE: Just found this text-shadow example on Greensock codepen, that animates by classname that might be helpful: http://codepen.io/GreenSock/pen/AznEH

Hello and welcome to the GreenSock Forums. So we can better help you, can you please make a limited codepen or jsfiddle with your issue so we can see what your HTML, JS, and CSS look like in context. http://codepen.io/pen/ http://jsfiddle.net/ Or if you have a link to your site or web page example. It will help alot in helping you! Thx

Hello and welcome to the GreenSock Forums. So we can better help you, can you please make a limited codepen or jsfiddle with your issue so we can see what your HTML, JS, and CSS look like in context. http://codepen.io/pen/ http://jsfiddle.net/ Or if you have a link to your site or web page that is throwing that error. It will help alot in helping you! Thx

Hello again , If you need to check Firefox, IE, and Touch Support.. without checking the user agent, which can be spoofed... see if the below helps. Checking if Firefox: // check if firefox var FF = !(window.mozInnerScreenX == null); if(FF) { // is firefox } else { // not firefox } Checking if IE and IE versions: // check if IE8-11 var hasDocumentMode = (document.documentMode !== undefined), isIE8 = (isDocumentMode === 8), isIE9 = (isDocumentMode === 9), isIE10 = (isDocumentMode === 10), isIE11 = (isDocumentMode === 11); if(hasDocumentMode) { if(isIE11){ // browser is IE11 } else if(isIE10){ // browser is IE10 } else if(isIE9){ // browser is IE9 } else if(isIE8){ // browser is IE8 } } If you really need to detect IE7, check for document.attachEvent: // check if IE7 var isIE7 = (document.attachEvent !== undefined); if(isIE7) { // browser is IE7 } else { // browser NOT IE7 } Checking for Touch support: // check if browser has touch support var hasTouch = !!("undefined" != typeof document.documentElement.ontouchstart); if (hasTouch) { // has touch support } else { // does NOT have touch support } Of course you could use Modernizr. But sometimes you just need less code to check for what browser is what..

Hello failure13 .. Just a side note ... When checking if the browser is Chromium based its best to use feature or object property detection versus checking the user agent. This is because the user agent can be spoofed. You had this: // user agent can be spoofed if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){ } To make sure you check definitely for Chromium based browser, try this: // check if Chromium based browser var isChromium = window.chrome; if(isChromium === true) { // is chromium based browser } else { // not chromium based browser } // check if Google Chrome var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Google Inc.") { // is Google chrome } else { // not Google chrome } // check if Opera 18 and above var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Opera Software ASA") { // is Opera 18 or above } else { // not Opera 18 or above } Hope this helps!

Hello and Welcome to the GreenSock Forums! Can you please setup a limited codepen or jsfiddle example. http://codepen.io/pen/ http://jsfiddle.net/ or post your code here.. So we can see your HTML, JS, and CSS in context, to better help you? And we can see what code you have tried that is causing this issue. Thx note: codepen and jsfiddle will only work in FULL mode in IE8...

This is happening because your 5 and 6 GSAP to() is using the css:{} object.. Since you are including the css {} object you need to put the css properties x, z, and rotationX inside the css:{} object: TweenMax.to($("#text5"), 2, {css:{alpha:0, z:0.1, rotationX:360}}); TweenMax.to($("#text6"), 2, {css:{alpha:0, x:1, z:0.1, rotationX:360}}); Notice how x, z, and rotationX are inside the css:{} http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html Here is a codepen you can test.. codepen will work in IE8 in FULL mode only: http://codepen.io/jonathan/full/uLEcm Hope this helps!

thx.. are you sure this is the right codepen.. http://codepen.io/anon/pen/rxvJz im not seeing any draggable code ?

Hello, i noticed in the code your provided above, that you have your CSS rules in a script tag. It should be in a style tag: <style type="text/css"> #slide5 { position:absolute; left:500px; top:100px; width:450px; height:400px; background-color:#49F7FA; } #slideScrollText { position:absolute; width:300px; height:330px; left:130px; top:70px; overflow:auto; border:0px solid #ff0000; z-index:1000; color:#666666; font-size:13px; padding-right:20px; } </style> if your DOCTYPE is for HTML5, then you omit the type attribute: <style> #slide5 { position:absolute; left:500px; top:100px; width:450px; height:400px; background-color:#49F7FA; } #slideScrollText { position:absolute; width:300px; height:330px; left:130px; top:70px; overflow:auto; border:0px solid #ff0000; z-index:1000; color:#666666; font-size:13px; padding-right:20px; } </style> other than that, can you please provide your example in a codepen or jsfiddle. This way we can help you in a live code environment.. since i kind of understand what your issue is, but a limited example will be very helpful !

Hello and Welcome to GreenSock Forums Mauro! also are you seeing this in IE8 standalone or are you seeing this in a different IE versions rendering document mode? have you looked into using autoAlpha CSSPLUGIN DOCs - autoAlpha: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html autoAlpha - the same thing as "opacity" except that when the value hits "0", the "visibility" property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, "visibility" will be set to "inherit". We don't set it to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Can you make a limited codepen or jsfiddle with your issue so we can see what your HTML, JS, and CSS.. so we can better help see what your seeing in IE8. thx

no worries.. glad you got it figured out Victor!

Hey Guys.. Here are some JSPERF test cases: class name VS tag and class name : http://jsperf.com/jquery-class-name-vs-tag-classname/5 selectors VS find() : http://jsperf.com/browser-diet-jquery-selectors/14 find() VS descendant : http://jsperf.com/find-vs-descendant-selector/36 jquery VS document.querySelector http://jsperf.com/jquery-vs-document-queryselector/31 jquery VS document.querySelectorAll http://jsperf.com/jquery-vs-queryselectorall/12 Hope these links are useful

Hello.. To those who like to target different browsers, due to the different rendering engines, please keep reading... Opera 18 was released last month (Nov 18, 2013). It is now based on Chromium 31. It looks almost exactly like Google Chrome. And functions way better than previous version of Opera. So if anyone needs a way to target Chromium based browsers like Google Chrome and now Opera 18 and above, the below might help. To target if the browser is Chromium based, use this: // this targets Google Chrome and Opera 18+ var isChromium = window.chrome;if(isChrome === true) { // is chromium based browser } else { // not chromium based browser } To target if the browser is Google Chrome, use this: var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Google Inc.") { // is Google chrome } else { // not Google chrome } To target if the browser is Opera 18 or above: var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Opera Software ASA") { // is Opera 18 or above } else { // not Opera 18 or above } There are like 5 other browsers that are Chromium based, but they are not as popular. In that case the window.navigator.vendor should provide the vendor. I hope this helps anyone that might need to target Google Chrome or Opera 18 and above, while you deal with the various different behavior in each browser. Have a great day!

Hello All, My question has to do when using the tween target. I know as far as speed that targeting elements in the DOM by ID is faster than targeting a class. I know to use document.getElementByID() when i need to target a ID. But when it comes to other selectors ( like classes, attribute selectors, etc... ) GSAP knows to add the jQuery $() if jQuery is included in the page. So my question is... What is faster... to omit the $(), or include it: ?? // jQuery is loaded in the page // Which is faster ? // without the $ TweenMax.to(".myClass", 2, { color:"#FC0"}); // with the $ TweenMax.to($(".myClass"), 2, { color:"#FC0"}); If I include the $() does it help with speed or performance, since im including the $() or does it not even matter? Thanks in advance for any help with my questions

Weird.. i use this and have tested this in Firefox, Chrome, Opera, Safari, IE7, IE8, IE10, and IE11 what browser and browser version is it not working on?to use it.. it requires at least jQuery 1.7 due to use of the on() method.. if you have an earlier jQuery version you will have to change on() to bind(). have you tried to add console.log() inside those events, to test if the console is outputting your console.log message?testing if the events are firing, and outputing in the console with console.log("focus") and console.log("blur") // check if browser tab has focus var notIE = (document.documentMode === undefined); if (notIE) { // checks for Firefox, Chrome, Safari.. NON IE versions $(window).on("focusin", function () { // code goes here console.log("focus"); }).on("focusout", function () { // code goes here console.log("blur"); }); } else { // checks for IE versions if (window.addEventListener) { window.addEventListener("focus", function (event) { // code goes here console.log("focus"); }, false); window.addEventListener("blur", function (event) { // code goes here console.log("blur"); }, false); } else { window.attachEvent("focus", function (event) { // code goes here console.log("focus"); }); window.attachEvent("blur", function (event) { // code goes here console.log("blur"); }); } } try this and look in the console in your browser inspector for the console.log() messages too make sure the events are firing. This way you can narrow down if the events are firing, versus maybe if the code inside it is having an issue.

Hello And Welcome to the GreenSock Forums Victor! You can try to add a focus and blur event on the browser window to check when you give it focus or not. This will also work within tabs or windows: // check if browser tab has focus var notIE = (document.documentMode === undefined); if (notIE) { // checks for Firefox, Chrome, Safari.. NON IE versions $(window).on("focusin", function () { // code goes here diverso.tl.resume(); }).on("focusout", function () { // code goes here diverso.tl.pause(); }); } else { // checks for IE versions if (window.addEventListener) { window.addEventListener("focus", function (event) { // code goes here diverso.tl.resume(); }, false); window.addEventListener("blur", function (event) { // code goes here diverso.tl.pause(); }, false); } else { window.attachEvent("focus", function (event) { // code goes here diverso.tl.resume(); }); window.attachEvent("blur", function (event) { // code goes here diverso.tl.pause(); }); } } The above will pause your timelines when the window or tab loses focus, and will resume once the window or tab regains focus. Hope this helps out

Hello and Welcome to the GreenSock Forums. I presume you are trying to pause the timeline for a brief time and then resume?if so you can try this: tl.add( TweenLite.to("typo1", 2, {}) ); this would add a 2 second pause.. basically its a regular tween except you are passing an empty object. Notice the empty squiggly brackets {} of the vars:Object. If you are looking to just pause the timeline?Then you can try using the addPause() method, but that will add only a pause, and not resume after specific time. I hope this helps! UPDATE: Just as Jamie advised below, you can leave the target as a empty object {} Thx Jamie

Hello.. it looks like your codepen is missing the GSAP script include.. TweenMax.min.js in the JS panel: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js

Is it possible to post one of the code experiments you are testing out? .. so we can look at what your doing and then advise on what might be the problem. codepen or jsfiddle even if its limited it will help in helping you! thank you!

hello again.. GSAP has a ScrollToPlugin, that is very awesome.. link to the Docs: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html Here is a nice post by Rodrigo with some helpful info and examples on the ScrollToPlugin: http://forums.greensock.com/topic/8053-scrolltop-in-greensock/?view=findpost&p=30899 http://codepen.io/rhernando/pen/bjLxe http://codepen.io/rhernando/pen/dLxAJ Here is another example made by GreenSock using the ScrollToPlugin http://codepen.io/GreenSock/pen/85cbd4300fdd217ff69bc4abeb6c7803 Also here is a plugin that uses GSAP to animate the scrolling called Superscrollorama: http://johnpolacek.github.io/superscrollorama/simpledemo_mobile.html hope this helps some!

Hello and Welcome to the GreenSock Forums! So to better help you.. can you please provide a limted codepen or jsfiddle example, so we can see your code in context with the HTML, JS, and CSS. Thx..