Over a million developers have joined DZone.
Platinum Partner

Using the Page Visibility API with Edge Animate

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

Yesterday I blogged about the Page Visibility API. In that entry I talked about how the API works and how it can be used. Today I thought I'd demonstrate another example of this API. Imagine you have an Edge Animate animation that runs in a loop. It would be cool if you could use the Page Visibility API to pause the animation when the browser tab isn't being displayed. Here is how I solved this.

First off, I have to admit that I did not know how to create a looping EA animation. This blog entry explained it well: How to Create a Loop in Adobe Edge Animate. Essentially you create a trigger at the end of your animation that causes the whole thing to start over. Simple and effective.

I then put all of my design skills to use to create the following:

Epic, right? The next part was rather simple. (Again, the assumption here is that you read the last post.) In Edge Animate I created a creationComplete event and then used the following code.

Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

    var that = this;
    function isVisible() {
      if("webkitHidden" in document) return !document.webkitHidden;
      if("mozHidden" in document) return !document.mozHidden;
      if("hidden" in document) return !document.hidden;        
      //worse case, just return true
      return true;

    $(document).bind("webkitvisibilitychange mozvisibilitychange",function(e) {
        if(isVisible()) {
        } else {


This is basically the same code as shown in the previous entry, but now it makes use of the EA APIs to stop and play the animation.

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


Published at DZone with permission of Raymond Camden , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}