4 Replies Latest reply on Mar 28, 2013 2:02 AM by AndreasGalster

    Append animation on click and play it.


      I want to append my animation via jquery on click(or any other given event) and then play the animation.

      What seems to happen though is, that it does not play, because the animation only plays on document.ready()?


      The following code, that uses a click event does not play the animation.


                   $(document).ready(function() {


                      //$('body').click(function() {

                          //$('#mystage').append ('<div id="Stage" class="collector"  style="padding-top:60%;"></div>');

                          $.getScript("collector_edgePreload.js", function() {









      The next one, that uses only document.ready() does play the animation.


                   $(document).ready(function() {


                          //$('#mystage').append ('<div id="Stage" class="collector"  style="padding-top:60%;"></div>');

                          $.getScript("collector_edgePreload.js", function() {







      This means, I somehow have to trigger the playing of the animation manually. I suppose the default of Edge Animate animations is to play on document.ready?

      I can't figure out how to start playing the animation. I would like to target a specific composition, because there will be more than one animation in my HTML file.


                                var myComp = AdobeEdge.getComposition("collector");















      None of this works and I'm totally lost in the JS API by now...


      Also, what does sym.play(); mean? Is sym just a general placeholder for the examples, that's supposed to be replaced with something like getComposition(), getStage(), etc?

        • 1. Re: Append animation on click and play it.

          Hi Andreas,

          I think the best solution for your scenario is Bootstrap Callback (AdobeEdge.bootstrapCallback()). Here you can define a callback for the ready event of each composition within your document scope. You can use the composition ID to handle the compositions differently (in case you have more than one composition on your page).


          Here is an excellent blog post:




          Happy Coding,

          Simon Widjaja

          edgecommons.org - Dirty Little Helpers for Edge Animate

          • 2. Re: Append animation on click and play it.
            AndreasGalster Level 1

            Hi Simon,

            thanks for your feedback. Currently I have the following code:


                         $(document).ready(function() {


                                $('#mystage').append ('<div id="Stage" class="collector"  style="padding-top:60%;"></div>');

                                $.getScript("collector_edgePreload.js", function() {



                                    var compID = "collector";

                                    AdobeEdge.bootstrapCallback(function(compID) {


                                        AdobeEdge.Symbol.bindTimelineAction(compId, "stage", "Default Timeline", "complete", function(sym, e) {










            Everything except for the part inside of the bootstrapCallback works - so it is recognizing that the animation is loaded. The inside part where I wanna tell the composition what to do just doesn't work yet. Any idea what I am doing wrong there?

            However, note how I still don't use a click event. I am still only using (document).ready(). As soon as I use a click event, bootstrap does not recognize when the composition is loaded and ready to play ...

            Which kinda brings me back to square one -> Nothing recognizes the loaded composition if it isn't being loaded on page load.

            • 3. Re: Append animation on click and play it.
              simonwidjaja Level 1

              ah now I see your problem.

              that's a tough one. the problem is in the implementation of the preloader of Animate.


              in the function closure they register the load/onload event like this:


                  if(document.addEventListener ){

                      window.addEventListener("load", onDocLoaded, false);


                  else if ( document.attachEvent ) {

                      window.attachEvent("onload", onDocLoaded );



              since it is an anonymous function closure you cannot call "onDocLoaded" from the outside. this function actually initializes your composition (removes display: none etc.). To be honest I don't see a way to get around this right now, without modifying the generated file.

              Do you have to attach the composition directly to the documents' DOM? Maybe a simple IFrame would be a solution. That's way easier and encapsulates your composition. So there wouldn't be problems like this.


              I've built a composition loader that uses an IFrame to nest multiple Animate compositions. works like a charme...



              • 4. Re: Append animation on click and play it.
                AndreasGalster Level 1

                I see... Shoot! Two nights of frustration for nothing . Well, it certainly sounds like the only option right now. I just hope adaptive images work properly with iframes that scale down :s.




                Thank you . It seems like I will be able to get things to work this way.