title: Start Animation (Animate CC) only when the canvas become visible after scrolling.
body: <p>I have an animation (made with Adobe animate CC) that I have included into my html file. I am trying to change its original script in order to start the animation from the beginning only when it becomes visible in the viewport of the browser. Unfortunately, I searched widely but couldn't make any of the solutions I found worked for my case. </p>
  
  <p>This is the original code I'm trying to change:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script&gt;
  var canvas, stage, exportRoot, anim_container, dom_overlay_container, 
  fnStartAnimation;
  
  function init() {
      canvas = document.getElementById("canvas");
      anim_container = document.getElementById("animation_container");
      dom_overlay_container = document.getElementById("dom_overlay_container");
      var comp=AdobeAn.getComposition("07578064E5C140B781D146A1AE4968A3");
      var lib=comp.getLibrary();
      handleComplete({},comp);
  }
  function handleComplete(evt,comp) {
      //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
      var lib=comp.getLibrary();
      var ss=comp.getSpriteSheet();
      exportRoot = new lib.Water_illustrazione_revista_scrollplay();
      stage = new lib.Stage(canvas);  
      //Registers the "tick" event listener.
      fnStartAnimation = function() {
          stage.addChild(exportRoot);
          createjs.Ticker.setFPS(lib.properties.fps);
          createjs.Ticker.addEventListener("tick", stage);
      }
  
   //follow a code to support hidpi screens and responsive scaling.
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body onload="init();" style="margin:0px;"&gt;
  
  &lt;div id="anchor5" class="Anime_p"&gt;
   &lt;div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:700px"&gt;
          &lt;canvas id="canvas" width="1280" height="700" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"&gt;&lt;/canvas&gt;
          &lt;div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; top: 0px; display: block;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>