Start Edge Animate when is in the screen

I’ve come across a few sites that will tie window scrolling with animation. When used in a subtle, small fashion, this is kind of cool. When used to change large portions of the view or really screw with scrolling, I detect it. Like most things, it all comes down to how you use it I suppose. But I was thinking recently – how can we do this with Edge Animate?

Change edgePreload.js

In a file calles something_edgePreload.js you find a line similar to the follow:

    if (AdobeEdge.bootstrapLoading) { 
        signaledLoading = true; 
        AdobeEdge.loadResources = doLoadResources; 
        AdobeEdge.playWhenReady = playWhenReady; 
    }

Replace playWhenReady with false.

Change edgeActions.js

First of all you have to insert a function to decide if an element is in the visible part of the screen.

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

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) 
            && (elemTop >= docViewTop));
}

This function returns True if an element is in a visible portion of the screen.

Now we have to change the main function to check it and then play the animation. Here the complete code of an edgeAction.js.

(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; 
   // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
       var showAnimation = true;
       function isScrolledIntoView(elem) {
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();

            var elemTop = $(elem).offset().top;
            var elemBottom = elemTop + $(elem).height();

            return ((elemBottom <= docViewBottom) 
                    && (elemTop >= docViewTop));
      }

      Symbol.bindSymbolAction(compId, symbolName, 
                    "creationComplete", function(sym, e) {
          var animSize = sym.getDuration();

          if(!isScrolledIntoView('.EDGE-1931783')) {
	        setTimeout(function() { sym.stop(); }, 0);    
          }

           window.onscroll = function(e) {
              if(isScrolledIntoView('.EDGE-1931783')) {
                  if (showAnimation) {
                    sym.play(0);
                    showAnimation = false;
                  }
              }
          }
      });
   })("stage");
   //Edge symbol end:'stage'

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

EDGE-1931783 is the class of my animation. Replace it with yours.

Happy coding!