Getting Adobe Edge Animations to work in WordPress (or any other CMS)
This post will show you how to make Adobe Edge Animation work in WordPress, or any other website that have to use absolute URL:s to access assets.
If you're reading this at a later date, I recommend you to check if they improved the script. Link to documentation; http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
I've also opened up an issue over at Github; https://github.com/wittnl/Edge-Animate-Runtime/issues/3
When EA (Edge Animate) is looking for assets they use relative paths. This becomes a problem when we're using WordPress, where we need to reference our theme folder, an absolute URL.
What we want
- Have all our assets stored in our theme folder
- Have all files load properly and enjoy our animations
├── assets │ ├── edge │ │ └── tools <-- the name of the composition │ │ ├── images │ │ │ ├── andlit.svg │ │ │ ├── haus-utlina.svg │ │ │ ├── haus.svg │ │ │ ├── hjalmur-utlina.svg │ │ │ ├── hjalmur.svg │ │ │ ├── skegg-h.svg │ │ │ └── skegg-v.svg │ │ └── tools_edge.js │ └── edge_includes │ ├── edge.5.0.1-pudge.js <-- the on we edited │ ├── edge.5.0.1.js
- Check for
comp.loadand change it so that it loads from our theme folder correctly.
comp.load('/wp-content/themes/my-awesome-theme/assets/edge/' + projectPrefix + "/" + projectPrefix + "_edge.js");
- Change the variables you need to change (e.g
tools_edge.jsso that it points to your theme folder.