If you add two (or more) edge animations onto a single page you need to modify the code slightly so that the two animations can run together.
Firstly place all the edge JavaScript files into the same folder as the web page.
Then add the code for both animations into the page as normal… e.g. in the header put:
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="animation1_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-310884 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="animation2_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-313368888 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
Then in the body where you want the animations to appear:
<div id="Stage" class="EDGE-310884"></div> <div id="Stage" class="EDGE-313368888"></div>
You then need to change the stage name for at least one of the animations to prevent clashes. Simply change the id of one or both of the animation divs as follows:
<div id="Stage1" class="EDGE-310884"></div> <div id="Stage2" class="EDGE-313368888"></div>
When I did this, the animations began running fine until one of them froze during an action.
By debugging the animation I found that the error was:
TypeError: jQuery.easing[jQuery.easing.def] is not a function in jquery.easing.1.3.js;46
After trying several different ways around this problem, the simplest was to comment out a few lines in the jquery.easing.1.3.js JavaScript file located in the edge_includes folder. Take the first few lines of code….
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
And commenting them out thus….
// def: 'easeOutQuad',
// swing: function (x, t, b, c, d) {
// //alert(jQuery.easing.default);
// return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
// },
This fixed the problem for my animations with no degradation in performance.