Make Adobe Edge-animation play only when user view part of the page where animation located

Question

I intend to make an edge-animation play, once the div animation part is viewed/scrolled in a page, and not looping.

so i figured out from the Q&A and found sample codes that Rich Bradshaw showed at this page: Does the code generated by Adobe Edge conform to good programming practice? :

Here's the code he showed:

<!DOCTYPE html>
<html>
<head>
    <title>Adobe EDGE TEST August 1, 2011</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="adobe_edge_test_edge.js"></script>
    <link rel="stylesheet" href="adobe_edge_test_edge.css"/>
<!--Adobe Edge Runtime End-->

<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>

</head><body onload="JavaScript:timedRefresh(4000);">
    <div id="stage" class="symbol_stage">
    </div>
</body>
</html>

I tried to implement that in my sample html page, i put the

'onload="JavaScript:timedRefresh(500);"

inside the BODY tag html as it's showed,.

the result is, the edge-animation reload entire pages to re-play itself,. Then i tried to put the 'onload' part inside the div tag i used to show edge-animation, because i think the 'onload' part will work according to where it's inserted

<div id="Stage" class="EDGE-109228010" onload="JavaScript:timedRefresh(5000);"> </div>

but that makes the animation didn't work :( help me with this ,. is there any way to make edge-animation play only when user view the part of page ?

score 1 · Accepted Answer · edited May 23 '17 at 11:52

I created a creationComplete event handler in Edge Animate and then used the JS code here for checking if a div is visible (Check if element is visible after scrolling). Here is the code I ended up with:

  Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
     // insert code to be run when the symbol is created here
     console.log('Start');

    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)) {
            console.log('Start me up'); 
             sym.play(0);
             $(window).off("scroll");
         }
     });


  });

well thank you for the alternative of creationComplete event handler, @raymondCamden,. :D i guess i do need some things more to figure out integration animation between edge and other event case in my html — ask91, Apr 10 '13 at 06:57
This code goes into frame one of the stage layer I'm assuming? What if we want a animation to be closer to centered on the screen before playing like the "two keys" animation here: http://mdm.cc/ — Mikeumus, Dec 16 '13 at 22:44

Make Adobe Edge-animation play only when user view part of the page where animation located

1 Answers1