Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using the Page Visibility API with Edge Animate

DZone 's Guide to

Using the Page Visibility API with Edge Animate

· Web Dev Zone ·
Free Resource

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()) {
           that.play();
        } else {
           that.stop();
        }
    });

});

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.


Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}