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

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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.


Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}