Search the Community

Hello! I'm wondering why tabbing through this demo https://codepen.io/itsMeAra/live/YzYXBGL/5244cd02fa2b0e6bf931105bc11f6517 doesn't seem to be highlighting the links in each section? Is there a way to get it so as you press Tab it highlights each link and scrolltrigger animates to that section?

I'm trying to build a tab slider that has three list items, and three associated copy block + icon. Overall...I'm not really sure where to start on this either. Ideally, when you click a different list item, it switches the content and icon to the correlating tab item and makes the List Item 100% opacity. Screenshot reference attached. I started getting the Tab "on click" working to switch with add/remove class for opacity, but when I try animating it to fade it just changes both of them. Thoughts on this?

hi, i have problem with tabs(hidden\visible) and miscalculation delta time when i back to my hidden tab, example: i have some object near top my display, this object duration to bottom drop = 10ms, when i started animation i fast change tab in my browser and wait 5 sec for see my object at half display when i back to my hidden tab, BUT i see my object remained at top. How i can decide this problem ? p.s. when i make tween i set useFrame:false, but this not helped for me p.s.s. sorry for my engl

Hello .. To anyone that needs to pause() and resume() your GSAP animations when switching browser tabs or windows and have them stay in sync. I did more tests and found that Firefox and Chrome where sometimes not firing the event focus and blur, when you left the active tab. So i found a better way that is consistent, to check if the current active tab has focus or not, using the HTML5 Visibility API. // main visibility API function // use visibility API to check if current tab is active or not var vis = (function(){ var stateKey, eventKey, keys = { hidden: "visibilitychange", webkitHidden: "webkitvisibilitychange", mozHidden: "mozvisibilitychange", msHidden: "msvisibilitychange" }; for (stateKey in keys) { if (stateKey in document) { eventKey = keys[stateKey]; break; } } return function(c) { if (c) document.addEventListener(eventKey, c); return !document[stateKey]; } })(); Use the HTML5 Visibility API like this: // check if current tab is active or not vis(function(){ if(vis()){ // tween resume() code goes here setTimeout(function(){ console.log("tab is visible - has focus"); },300); } else { // tween pause() code goes here console.log("tab is invisible - has blur"); } }); You will still need the following to check if other windows have focus or not (blur). Chromium type browser like Google Chrome or Latest Opera do not fire all the time when binding the event with jQuery window, so you need to check for window.addEventListener. // check if browser window has focus var notIE = (document.documentMode === undefined), isChromium = window.chrome; if (notIE && !isChromium) { // checks for Firefox and other NON IE Chrome versions $(window).on("focusin", function () { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }).on("focusout", function () { // tween pause() code goes here console.log("blur"); }); } else { // checks for IE and Chromium versions if (window.addEventListener) { // bind focus event window.addEventListener("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }, false); // bind blur event window.addEventListener("blur", function (event) { // tween pause() code goes here console.log("blur"); }, false); } else { // bind focus event window.attachEvent("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }); // bind focus event window.attachEvent("blur", function (event) { // tween pause() code goes here console.log("blur"); }); } } You will also notice that i have a setTimeout() in the focus event handler so the tab/window has enough time to gain focus, and so the focus event handler fire consistently. I noticed Firefox and Google Chrome were not resuming correctly unless i added the setTimeout(). The reason i use the HTML5 Visibility API is because some browsers like Chrome wont trigger the tab blur unless you actually click inside the other new tab, simply scrolling with the mouse wont trigger the event, I hope this helps anyone who needs to pause() and resume() their animation so they don't get out of sync. **UPDATE** FULL PAGE mode: http://codepen.io/jonathan/full/sxgJl EDIT mode: http://codepen.io/jonathan/pen/sxgJl To Test, try: First clicking inside the Preview panel so the page gains focus (important) Switching between tabs Giving another program focus and come back to the browser See below post for more info Also.. I made it into a jQuery plugin called TabWindowVisibilityManager so you only have to define your pause() and resume() code once inside the FOCUS and BLUR callbacks. See the bottom post. TabWindowVisibilityManager.zip

Hello experts. I'm having trouble with some ads, I've recently created. If you take a look at this, it looks ok at first glance: http://coop.nmd.dk/banners/placeholders/targetgroup2/300x250/targetgroup2_300x250.html If you create a new browser tab, click it, wait a little while and change back again, the animated elements get, what seems to be undeterminate positions; most often outside the stage. It happens in IE, Firefox and Chrome; haven't tested on Mac. I don't see any particular pattern. Can you help me out? Every 5th second, a timer runs this. The indexer is just an integer, which in this case switches between 0 and 1 function boingInd(indexer) { var i = "#image"+indexer; var j = "#outerUsp"+indexer; var k = "#calltoactionf"+indexer; // Apply the original style to the objects, so that they are positioned as they should appear in the banner document.getElementById("image"+indexer).className = "image"; document.getElementById("outerUsp"+indexer).className = "outerUsp"; document.getElementById("calltoactionf"+indexer).className = "c2a"; // When this is done, animate them from outside the canvas area and to the positions, just assigned. TweenLite.from(i, 1, {delay:0.1, y:200, ease:Back.easeOut}); TweenLite.from(j, 1, {delay:0.3, y:200, ease:Back.easeOut}); TweenLite.from(k, 1, {delay:0.5, y:200, ease:Back.easeOut, onComplete:allowChange}); }

Can anybody help to fix the IE10 issue (text on the panel is upside down) all other browser the tab work correctly Experiment code http://codepen.io/bobbykc13/pen/Itswb