1 Reply Latest reply on Aug 22, 2014 3:12 PM by jahandaniel

    Load and start animation after the page is loaded

    ppalmeida

      Hi, all.

       

      Recently I had a very difficult problem here with Adobe Edge. I have a page where an Edge animation should only load and execute AFTER the page was completely loaded. It was inside a local Adobe DPS HTML webview. We want the animation only execute IF the iPad was 2 or newer. If the iPad was iPad 1 a generic, static content should be showed.

       

      So, i did something like this in my HTML file, in the end of the body

      <script>

           // if iPadVersion === 1 (or the user clicks a button or whatever, load an external Edge Animation and play it):

          

           var script = document.createElement('script');

           script.src = "index_v_edgePreload.js";

           document.getElementsByTagName('head')[0].appendChild(script);

      </script>

       

      Guess what? It never works. Edge only start the animation when i put the tag directly in Head element. Explicitly.  Any attempt I did to "lazy load" an Edge Animation failed silently. The script tag was correctly wrote in the HTML, all other assets in the animation were apparently correctly loaded as well, but the animation never started.

       

      These are my questions:

       

      1) Can I load an Edge animation after the page has fully loaded? For exemple, if a user clicks a button in the page?
      2) Can I load more than one animation and control them with buttons or events outside Edge (for example, with parallax scrolling) independently?

      3) How do I unload or "stop" an animation based on external events (like, for example, the user clicks a button that "closes" a lightbox that has a Edge animation inside going on)?

      4) Can I load the very same animation many times in different DIVs elements and execute them in different times? Can I stop, play, pause the animations independently, even being the same animation?

       

      All these questions are very important to me, because i use to do many applications with different scenarios where Edge would be one of many animations I want see in page, but not only.

       

      Thank you.

       

      Pedro Paulo Almeida

      Front-End Developer

      São Paulo, Brazil