Jump to content
Search Community

Chrome javascript suspension issues

samcreate 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,

 

We're using TimelineMax and TweenMax to make a scrollable timeline animation. Everything is going great except when leave the tab open and navigate away to another tab, which causes chrome to (I'm not sure on this one) suspend or slow down timers from 'ticking'. When you navigate back to the tab, we're seeing erratic behavior that will show random pieces of our timeline all stacked up on top of each other (http://screencast.com/t/vC00sJHXCkCT).

 

 

I've tried to use https://github.com/ai/visibility.js to set the timeline progress to zero whenever a user activates the tab again, but the behavior still exists.

 

Steps to create:

 

1. go to http://alert-gum.herokuapp.com/ in chrome/firefox

2. scroll down a little bit

3. open a new tab in front of the alert tab and wait for 3 mins

4. go back to the tab and try scrolling.

 

result: items scattered and stacked on top of each other from different points in the timeline.

 

p.s. the issue 'kind of' fixes it's self if you scroll all the way up and all the way down (obviously not satisfactory) 

 

Thanks for any help.

 

Link to comment
Share on other sites

First of all, nice work on the site! Looks very slick and it seems like you've got a good grasp of the tools, making use of timelines and many of the deeper features. Excellent

 

I wasn't able to reproduce the problem on my end (yet), but I do have a few questions for you:

  1. Do you know if the issues are specific to particular types of tweens, like from() or fromTo()?
  2. Have you tried earlier versions of GSAP, like 1.8.4? There were some changes in from() and fromTo() in 1.9.x that might have affected things. I have also attached a preview of 1.9.2 that addresses an issue with from(). I'm not aware of any bugs in 1.9.2 (preview), but we're not quite ready to release it yet. I'd be curious if it solves things for you.
  3. Have you tried turning off the requestAnimationFrame functionality? It should be as simple as TweenLite.ticker.useRAF(false); The down side, of course, is that animations won't "sleep" when the tab is inactive, thus battery power on mobile devices won't be spared as much. But if you want the ticks to keep getting dispatched at the same pace when the tab is inactive, this may be a good solution for you. 

It can be VERY difficult for us to troubleshoot an issue in context like this when you've got over 1000 lines of code and we'd have to try to get up to speed on all the ins and outs of your code and how the different pieces interact, etc. I noticed you're using onUpdates, onCompletes, and onReverseCompletes to do a lot of custom stuff, and I wonder if some of that is causing the issue (I have no idea - just a guess). 

 

If 1.8.4 and 1.9.2 (preview) don't solve things for you, I'd recommend trying to create a very simple example with only the bare essentials so that the problem can be isolated. Then shoot us the necessary files or a codepen or jsfiddle and we'll take a peek. Or if you need consulting services for rolling up our sleeves and digging into your production files, shoot me a PM or e-mail and we can discuss that. I'm sure we can get the problem solved one way or the other. 

 

Again, nice work on the site. 

1.9.2_preview1.1.zip

Link to comment
Share on other sites

  • 5 months later...

This is curious. We have noticed this on some beta builds of huffpostlive, we are using the timeLine to transition segments. Sometimes, when we use multiple tabs, we come back to our 

video player and a segment transition happens and none of the onComplete functions are triggered, we know this because our backbone models on our new segments have not been set.

 

Does the above solution do the trick? Definitely, love timeLine and we'd like to use in production.

Link to comment
Share on other sites

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! :)

  • Like 4
Link to comment
Share on other sites

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

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