Platinum Partner
css,html5,web design,tips and tricks,edge animate,page visibility api

Using the Page Visibility API with Edge Animate

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.


Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}