Ask google this question and all directions point to one man's script:
Re: Getting an Animation to start when you scroll to it on the page.
He no longer uses Edge animate and after looking at my project (zaksportfolio.com/podify) assumes an update has made his code obsolete. If you look at my demo page the blank white section is where the animation should begin (when it's told to play for being on screen).
When I use his code, pasted below, I get this console error on the page: Uncaught TypeError: Cannot read property 'top' of undefined.
I'm not too familiar with jquery - I just use bits and pieces and tweak them until it gets the job done. This problem has stumped me for awhile. Anybody figure out a way to start an animation only when it's in view? Anyone with an animation lower than the page fold can assume their animation is done before viewer gets to it so it seemed like it would be a common problem to me but maybe not.
Thanks for any help!
---
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
// insert code to be run when the symbol is created here
//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) );
}
$(window).on("scroll", function(e) {
if(isScrolledIntoView(sym.element)) {
sym.play();
} else {
sym.stop();
}
});
});
//Edge binding end
---