Animate CC 2017 - multiple canvas on one page

[Rubber Design]

Hello! Is there anyone you can point me in the right direction with regard to adding multiple Animate cc canvas anims on one page? Ideally I would like to be able to target objects exportRoot1, exportRoot2 from the main html, but unsure of where to start with the publish code in the latest animate version.

apologies if this has been asked previously but hours of trawling the interwebs hasn't thrown up anything that works for me!

Current code for this version is as below (I've cut out the resposive bit for now):

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("C7993C80F52F41D49D9FB2C70C8DB1DD");

    var lib_anim_one=comp.getLibrary();

    var loader = new createjs.LoadQueue(false);

    loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});

    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

    var lib_anim_one=comp.getLibrary();

    loader.loadManifest(lib_anim_one.properties.manifest);

}

function handleFileLoad(evt, comp) {

    var images=comp.getImages();   

    if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }   

}

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_anim_one=comp.getLibrary();

    var ss=comp.getSpriteSheet();

    var queue = evt.target;

    var ssMetadata = lib_anim_one.ssMetadata;

    for(i=0; i<ssMetadata.length; i++) {

        ss[ssMetadata.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )

    }

    exportRoot = new lib_anim_one.extra();

    stage = new lib_anim_one.Stage(canvas);

    stage.addChild(exportRoot);   

    //Registers the "tick" event listener.

    fnStartAnimation = function() {

        createjs.Ticker.setFPS(lib_anim_one.properties.fps);

        createjs.Ticker.addEventListener("tick", stage);

    }           

    AdobeAn.compositionLoaded(lib_anim_one.properties.id);

    fnStartAnimation();

}

Many thanks in advance!

[RandomlyFish]

What specifically do you need multiple canvas for? Depending on what you want to use it for, I think you could get the needed result with symbols.

[Rubber Design]

I had in mind that I wanted a scrolling page of say three sections - a separate canvas in each. Each could be triggered when scrolled into the viewport - if I should be thinking about it in a different way then I'd love to hear!

I did try iframes, but couldn't figure out how to call exportRoot from the main file?

Thanks for the response

[ClayUUID · Accepted solution]

You just access the iframe's window object...

var exportRoot1 = document.getElementById("myIframeID").contentWindow.exportRoot;

Or something like that.

[Rubber Design]

Many thanks that worked!

[davi-t]

Adobe:
Can you create a token for creating custom publishing templates for this composition ID variable please? Right now (Animate CC 2017 2nd update), they've ADDED this comp id with random string ID, but didn't add a token to the custom publishing templates (see docs here > Create HTML5 Canvas documents in Animate CC))

[ClayUUID]

Iframes have always worked for me. Others have strange and different opinions.

Embed Multiple Animate CC Interactive Graphics on a Webpage