Animation gets corrupted when browser tab gets inactive

[forethoughtde]

Your system information

• VelocityJS version: latest from JS Bin
• Browser: All browsers
• Operating System: All OS

Checklist

• Is this an issue with code?: Yes
• Is this an issue with documentation?: No
• Have you reproduced this in other browsers?: Yes
• Have you checked for updates?: Yes
• Have you checked for similar open issues?: Yes

Please remember that this is an issue tracker, support requests should be posted on StackOverflow - see CONTRIBUTING.md

Please describe your issue in as much detail as possible:

I have animation running continuously on setInterval. Animation with two items in sequences are working fine but when adding third item to sequence, the animation gets corrupt when users open new tab and check something and come back to animation tab.

Steps for reproducing this issue (code):

1. Run the program and open new browser tab and check something for 10 seconds
2. And go back to JSbin tab to observe the animation

JSFiddle example showing issue in action (code):

https://jsfiddle.net/u41eyzhm/8/ (Does not execute setInterval well enough. Please check the jsbin link)
https://jsbin.com/werafirane/1/edit?html,css,js,console,output

[Rycochet]

Gah - even running the tests in the background causes this, and it's supposed to work properly in all cases - I'll put this top priority for when I get home later, thank you!!!

[forethoughtde]

For now, I use the following strategy to combat this bug.

var activeFlag__0 = true;
    function dataFlowing__0(){
        activeFlag__0 = false;
        $ball_0.velocity({ left : "100%" }, {
            complete : function(){
                $(this).velocity({ top : "90%" }, {
                    complete : function(){
                        $(this).removeAttr('style');
                        activeFlag__0 = true;
                    }
                });
            }
        });
    }

    function flagManager__0(){
        if (activeFlag__0) {
            dataFlowing__0();
        }
    }

    ball_0_BlinkInterval = window.setInterval(function(){
        flagManager__0();
    }, delay__0);

[Rycochet]

Can you check the latest github build and see if that's behaving better? It can't do anything about IE10, but all modern browsers have tested correctly (though the tests need fixing).

[forethoughtde]

I get sequence is undefined error.

[Rycochet]

Just had a proper look at this, and you're deleting the "style" attribute manually - Velocity doesn't care about that at all, it's part of the reason that Velocity is so fast in that it caches values.

After fixing the function itself there's still an issue in there - it'll run the first part of the animation, but not any of the rest of it - so I'll see if I can track it down.

function dataFlowing__2() {
  $ball_2
  .velocity("stop", true)
  .velocity({
    bottom: ["100%", "5px"],
    left: ["-10px", "-10px"],
    top: ["", ""]
  })
  .velocity({
    left: ["90%", "-10px"]
  })
  .velocity({
    top: ["3%", "0%"]
  });
}

[TimUnderhay]

@Rycochet I believe I may have just experienced like this myself. When a tab with a running velocity animation goes into the background and then back to the foreground, it will sometimes go into a state where another animation cannot be run. Velocity just does nothing.