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:
You can try a demo of this here: https://static.raymondcamden.com/demos/2013/apr/3/Untitled-1.html Please try not to be too amazed at my incredible animation and design skills.