Participant
August 9, 2024
Question
Trying to run more than one HTML5 animation on a website but only one works
- August 9, 2024
- 2 replies
- 254 views
Hey, I'm trying to run more than one HTML5 animation on my website, they work separate but they don't work at the same time, I'm realising that there's probably an issue with the HTML code but can't figure it out.
Here's the code for one of the animations:
<script src="https://uploads-ssl.webflow.com/667d75b3a39631c47d36d495/66b6094d227936dca5db8bac_createjs.min.txt"></script>
<script src="https://uploads-ssl.webflow.com/667d75b3a39631c47d36d495/66b611d395ff1673d2528820_Animate-Engage.txt"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas_E");
anim_container = document.getElementById("animation_container_E");
dom_overlay_container = document.getElementById("dom_overlay_container_E");
var comp=AdobeAn.getComposition("4A672C69714D6349967537ACC8DD4484");
var lib=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=comp.getLibrary();
loader.loadManifest(lib.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=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
exportRoot = new lib.AnimateEngage();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<body onload="init();" style="margin:0px;">
<div id="animation_container_E" style="background-color:rgba(255, 255, 255, 1.00); width:150px; height:150px">
<canvas id="canvas_E" width="150" height="150" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container_E" style="pointer-events:none; overflow:hidden; width:150px; height:150px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
It works on it own but if I duplicate it the first one doesn't run anymore. I'm trying to implement this in Webflow so I'm using the code embed widget.
AdChoices