Welcome back to the thread that won't die. I've blogged (see related links below) about this topic six times now. It started off as something simple - making an Edge Animate animation wait to run until visible - but it has turned into a pretty complex set of entries discussing not only how to do it but alternatives and other modifications. Today's entry is rather simple though as it just covers updates for the October 2014 release of Edge Animate.

Reader @jdesi posted a comment this morning about an issue he was having with my code in the latest release of Edge Animate. (You can read details about that update here: Edge Animate reduces runtime size by 55%, "Save to Custom Folders" feature, new Preloader options, and more!) I did some digging and discovered a few different issues with my code.

Before I go any further, please note that I worked on a modified form of the first demo I built for this feature. My later entries in this thread made the behavior a bit more complex. I'm assuming people can apply the updates I describe below to those versions as well.

The first thing I discovered is that jQuery is no longer included by default in the HTML template. This is discussed in the blog entry I linked to above and while I could have certainly worked around needing jQuery, it was simpler to just add it back in. I did so in the index.html file and included it before the Edge JavaScript include.

The next thing I noticed was that sym.element wasn't available. I checked the (updated) JavaScript API and saw that a new API existed: sym.getSymbolElement

The next change was a bit more subtle (but still documented!) - the element will now be wrapped in jQuery, if you have included it. From the docs:

"Note: If you have added jQuery as an external dependency in the Edge Composition, then sym.getSymbolElement() will return a jQuery wrapper, as AdobeEdge.$ gets redefined to jQuery in such cases. You can use any of the jQuery APIs on the result in this case."

So with that being the case, the method I wrote to check if the element was in view was able to remove the $ wrappers. Here is the updated version of the code. 

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

		function isScrolledIntoView(elem) {
			var docViewTop = $(window).scrollTop();
			var docViewBottom = docViewTop + $(window).height();

			var elemTop = elem.offset().top;
			var elemBottom = elemTop + elem.height();
		
			return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
			  && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
		}		  

		var element = sym.getSymbolElement();
		if(isScrolledIntoView(element)) {
			sym.play(0) 
		} else {
			$(window).on("scroll", function(e) {
				if(isScrolledIntoView(element)) {
					console.log('Start me up');	
					sym.play(0);
					$(window).off("scroll");
				}
			});
			
		}
		  
		  
      });

You can test this version here: http://www.raymondcamden.com/demos/2014/oct/14/test.html. As a reminder, this one won't pause if you scroll out and won't restart if you scroll back in. That's covered by later versions of my demo and can be used if you simply apply the fixes described here to them. Enjoy!