1 Reply Latest reply on Aug 21, 2014 6:19 PM by NaviB2

    Load an animation multiple times (dynamic loading)

    jjperezaguinaga

      I'm creating a page has multiple "views". In one view (A), I'm successfully loading an Adobe Edge animation, and I can even trigger it when the user scrolls down half of the view. The user can then go to other views (B, C, D); doing so removes the DOM element that has the AE animation tied to it. If the user goes back to the first view (A), then the animation is not displayed.

       

      Here's how I'm loading the animation:

       

      1. Head file: animation_edgePreload.js
        • I modified the contents of the Preload file since the assets are in different folders now:

       

      aLoader = [

                 { load: "components/jquery/jquery.min.js"},

                 { load: "lib/edge.2.0.0.min.js"},

                 { load: "js/animations/recruiting/recruiting_edge.js"},

                 { load: "js/animations/recruiting/recruiting_edgeActions.js"}];

       

        • I also modified it in order to allow bootstraping:

       

      window.AdobeEdge.bootstrapLoading = true;

       

      1. From my "view", as soon as the content is loaded, I perform dynamic loading. This is performed every time my "view" is loaded:

       

      AdobeEdge.loadResources();

      AdobeEdge.playWhenReady(); 

       

      1. Then, I bind my animation to the bootstrapCallback(function(compId) { ... }) and save my composition in a "global" object:

       

      window.compositions[compid] = AdobeEdge.getComposition(compId)

       

      1. The first time I load my "view", I can successfully run it with getStage(), whenever I do that this again in the same page (HTML5 mode redirection), the animation fails to display the components. The div with the class is there, but not replacement is done by AE.

       

      window.onscroll(function(){

           ... //detect scroll at certain height

          window.compositions[compid].getStage().play(0) // this is actually inside a timeout, but has no issues

      })

       

      Sometimes I get a "Can't get property 'tween' of undefined" when changing to other views, but this seems not happening many times. When I go back to the original view, getStage() returns 'undefined', even though there is indeed a composition object (saved in a global variable).

       

      Edge version is 2.0.0 and the JS framework I'm using to load these views is AngularJS. Any insights are appreciated.