Calling play(), stop() or other functions of edge animate from external javascript

If you are working inside the edge animate and you wanna play or pause the animation, you can simply use sym.play() and sym.stop() functions. But if you want to perform these kind of actions from any external javascript functions, you can’t do it just by writing the script ‘sym.stop()’. Here I’m describing a way to perform these from external javascript.

Code snippet & Explanation

If you download the source and open the edge-animation-handler.js file, you will find the following code there.

var comp;
AdobeEdge.bootstrapCallback(function(compId) {
	comp = AdobeEdge.getComposition(compId).getStage();
});
function vc_stop(){
	comp.stop();
}
function vc_play(){
	comp.play();
}

AdobeEdge.bootstrapCallback():

Edge animate provides the AdobeEdge.bootstrapCallback() function, which is automatically triggered once an Edge composition is loaded and ready to play.

AdobeEdge.getComposition():

Returns the composition that owns this symbol instance. For example, you can use sym.getComposition().getStage().getSymbol(“symbolName”).play(); to get the stage from the composition level, get the symbol, and play the timeline.

getStage():

Returns the stage symbol instance for the composition. The stage is a symbol JavaScript object. This is a very important function, cause you have to get the stage first to get the other elements inside the stage.

By the description of above three functions, I hope you can understand how the above snippet works. It just catches the composition or stage and sets the reference to the variable named ‘comp’. So ‘comp’ is similar to your ‘sym’ here and comp.play() is equivalent to sym.play() here.

Demo & Source code

live-demo-button download-button

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Shane

    I’m stumped. I’m using Edge CC and a WordPress build I just themed. My Animation is using too much cpu when loading virtual tours on top of it all. I wanted to write a simple javascript that just stops it on certain pages. I’ve got my edgeID, but calling
    function vc_stop(){
    comp.stop();
    }
    does no good.

    • metalshan

      have you used the getComposition function to get the var comp?

    • Shane

      Getting an error when I reply on this site. Adding a snap of the code…

      I put single quotes around my Comp ID ‘EDGE-10184779’ and no luck either.

      Yes. Here is what I just tried again:

    • Shane

      I’m referencing the Comp ID Wrong somehow is probably why.

    • metalshan

      hey, the function inside bootystrapCallBack accepts a variable, but you are trying to give some value. Javascript will through an error here and will stop working.

      You use
      AdobeEdge.bootstrapCallback(function(compId) {
      // put a breakpoint here and check whether the compId is comming correctly or not.
      comp = AdobeEdge.getComposition(compId).getStage();
      });

      can u share your code, I will modify the part.

  • LuPach

    Hello maybe you can help me out

    I have this site http://www.mentalia.mx/prueba where there is a form to the right that once you fill it and press the button it should start the animation.
    The problem is that the animation autoplays even if it’s not visible, I tried several ways to get it to work properly and nothing worked, tried the Stage’s option “autoplay”, to put a trigger with a stop at the second 0, and even using vc_stop() onload and nothing, the autoplay the only thing it does is ignore the rest of my triggers.
    Same thing with the close button, it was supposed to work that it hid the animation and paused the animation at least. but it only hiddes it, then it strips the rest of the triggers.
    I dont know what am I missing, can you give me hand?
    Thank you

    • metalshan

      In right side I didn’t find a form. At left there is one for registration. But the text boxes are disabled and I’m not being able to do anything.

    • LuPach

      Sorry I missed a part of the link, it’s http://www.mentalia.mx/prueba/home that’s the one

    • metalshan

      At the end frame of the timeline of the animation, put a javascript or jquery script to click the close button. I think that’s what your requirement is

    • LuPach

      The close button works fine for hiding the animation (yesterday was at least) , what I want is to pause it and to stop it automatically playing on page load