Welcome to the final blog post on delaying Edge Animate animations. I'm saying final just because I can't believe how such a simple thing has turned into so many different blog posts, so many different variations, and so many different fun diversions. Most likely because I said this will be the final post, someone will discover some other interesting opportunity and I'll have to write a part 5. But hey - that's the fun part about being a developer, right? Before we start though, please be sure you've read the earlier posts. I'll link to them at the bottom.

I had an interesting discussion with Felix in the comments on my second blog entry on this topic. He discovered an interesting bug. If the animation was scrolled into view, it would play. If the animation completed, and you scrolled it a bit, but just a tiny bit so it never left the view, it would start over.

The issue was simple. My code didn't know that the asset had stayed visible during the scroll event. To fix this, I simply keep track of the asset becoming visible.

/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
      
      
      Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
         // insert code to be run when the symbol is created here
		var wasHidden = true;

		//http://stackoverflow.com/a/488073/52160
		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) );
		}		  
		
		//Immedidately see if visible
		if(isScrolledIntoView(sym.element)) {
			console.log('on load vis');
			wasHidden=false;
			sym.play();
		}
		  
		function doStart() {
            if(isScrolledIntoView(sym.element)) {
				if(wasHidden) {
					console.log('Start me up');	
					sym.play();
				}
				wasHidden = false;
            } else {
                console.log('stop');
                sym.stop();
				wasHidden = true;
            }
            
		}
		  
        $(window).on("scroll", doStart);
        

      });
      //Edge binding end

      Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) {
         //sym.play("Loop")

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'

})(jQuery, AdobeEdge, "EDGE-62515662");

If you've read the other posts then most of this should make sense already. To see this in action try the demo below.