Search code examples
javascriptcssadobe-edge

Using Edge CSS3 animations separately on the same website

I'm looking into CSS3 animations these days and I was hoping I could use the character from this site: http://andrew-hoyer.com/experiments/walking/ to create a simple punching animation.

I was wondering if you had any ideas on how to include multiple edge projects in the same webpage?

This is my project so far: http://www.filedropper.com/dummy3

Basically what I'm hoping to do is create the animations in Edge, include them in a normal website, and start/stop the animations using JavaScript externally.

Hope it makes sense:)

Solution

  • if you look at the adobe edge api, it outlines how to combine multiple compositions into one page. http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

    there's currently no automation tool for doing so. this means you have to make these changes yourself. it's a matter of altering the html file to reference the various compositions you're going to use.

    so you add the preloads:

    <!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="composition_one_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="composition_two_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

    then make sure each composition has a stage:

    <div id="stageOne" class="EDGE-1010101"></div>
<div id="stageTwo" class="EDGE-8338338"></div>

    hope this helps.