Ramond Camden explains it really well with almost 6 blog posts dedicated to this issue:
Below is the text from the blog verbatim:
Delaying an Edge Animate asset until visible - Part 1 (April 3, 2013)
First, ensure you disable autoplay on the Stage element:
Next, click on the "Open Actions" panel and enter some text for the
creationComplete event. I don't write much JavaScript directly in Edge
Animate, instead, I simply put in something simple, like
console.log('yo mama!'), just to get Edge Animate to create the event
and make it easier for me to find in my editor.
I created a simple application, ran the code, and ensured that it was
not running (since I had disabled autoplay). Now for the fun part. How
do we tell if we the Edge Animate asset is visible? I turned to Stack
Overflow and found a great utility for this (well, for DOM items in
general): Check if element is visible after scrolling As you can see,
it checks the Window's current scroll setting as well as the DOM
item's size.
Given this function, I decided on this basic pseudo-code:
if(visible) run the animation else listen for scroll events and check
if visible
Here is the code I came up with:
/***********************
* 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
console.log('Start');
//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) );
}
if(isScrolledIntoView(sym.element)) {
sym.play(0)
} else {
$(window).on("scroll", function(e) {
if(isScrolledIntoView(sym.element)) {
console.log('Start me up');
sym.play(0);
$(window).off("scroll");
}
});
}
});
//Edge binding end
})("stage");
//Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-62515662");
You can try a demo of this here:
http://www.raymondcamden.com/demos/2013/apr/3/Untitled-1.html Please
try not to be too amazed at my incredible animation and design skills.