A few months back I wrote a blog entry (Delaying an Edge Animate asset until visible) that discussed how to ensure folks actually saw your Edge Animate animation. It used a bit of code to detect if the asset was available and if not - listened for scroll events to figure out when it should fire off. A reader asked me an interesting side question. Given an animation that may loop, or a user who may scroll up and down, is it possible to just pause the video when not visible and re-enable it when viewed? Yes! Here is my solution.

First - I wanted an animation that would loop. There isn't a simple button you can click to enable this in Edge Animate, but it isn't terribly difficult either. Read this forum post with a great answer by user dhosford: Edge Animate questions. Basically you add a label and use the "complete" action to send the playback back to the label.

The next step was easy. I used the code from my previous demo in a slightly modified form. My last entry would only check for scroll events once. I modified this to always listen for scroll events and see if the asset was in, or out, of the view port. I'm a bit concerned about the performance implications this may have, but... here it is:

Yeah, not exactly rocket science, but it seems to work well. You can view a complete working demo below. I use a large amount of text to push the asset down, but I recommend making your browser a bit skinnier before you load it.

p.s. On a quick note - I seem to remember that Edge Animate would sometimes blow away your modifications. When I used it to load my previous demo and worked on it, it didn't touch my code at all. I don't know if that's new with CC or not, but, that's cool!