Edge Commons - Dirty Little Helpers for Edge Animate

The purpose of this extension library is to improve the workflow and enhance the possibilities of Animate compositions. There are several components available, such as Parallax Scrolling, Spotlight Overlay or Adaptive Layouts. The components listed here are already tested and documented. We are, however, steadily working on new features and components.

The Edge Commons are completely open source and therefor free to use in personal and commercial projects. If you are interested, you can also contribute to the project on GitHub.

This page will take you through the current features and will also explain, what the Edge Commons are and how you can include them in your projects. You don't have to code yourself, you can simply follow the instructions and copy all the code you need from this page.

Feature Overview:

Watch Adobe TV episode on Edge Commons now

In this episode you will learn everything about Edge Commons. This video covers the integration process and shows how to use the Spotlight feature for media overlays.

Using Edge Commons

The Edge Commons library consists of several packages. If you are new to Edge Commons we recommend the “All-in-one” package. This package includes all available features (except the experimental ones). If you deploy your final compositions you should consider loading only the modules that you actually use.

You can either download the library or use the live version from our public server (CDN): http://cdn.edgecommons.org

Since the last update to Animte CC (3.0) in january 2014 you can use the library panel in Animate to add the Edge Commons library easily:



Step by step:


(1) Go to http://cdn.edgecommons.org and choose your package (if you are not sure which suits your needs, choose "All-in-One")


(2) In Edge Animate click on the "+" icon in the scripts panel of your library. Select "from URL" for the CDN version of Edge Commons. Otherwise choose "from Disk" if you have downloaded the library.

(3) Now Animate asks for the location/URL of the external library. Paste the URL from the CDN server


(4) The Edge Commons library should appear in the scripts panel. Now you can start using all the cool Edge Commons features in your composition. You can e.g. activate the Parallax feature in "creationComplete" of your stage like this: 



Helper Functions

The clue is in the name: Dirty Little Helpers. There are several modules but also some smaller helper functions available, e.g. to load/nest compositions or to get the name of dynamically created symbols.

Center Stage

Composition Loader



This feature enables the integration of separate Animate composition into a container of another composition. Entire websites can be built this way and several persons could work independently on one project.

Parallax: Simple example


The Spotlight features can display different media types in nice looking and animated overlays (similar to popular lightbox/colorbox component). Currently Spotlight supports three media types: images, Animate compositions and YouTube videos. The Edge Commons library has to be loaded before using the Spotlight feature (see section "Using Edge Commons" for more details).

Spotlight: Simple image overlay

Spotlight: Overlay with Edge Animate composition

Spotlight: Overlay with YouTube video

Spotlight: Configuration details

Live Demo

Adaptive Layouts (independent layouts for specific sizes)

Edge Animate let's you create flexible layouts with percentage values. In most of the cases it is not enough to just use this technique, because many compositions do not scale well from narrow smartphone width to high definition desktop screens. So if you want to create independent layouts for different resolutions, this is the right feature for you. Since Edge Animate does not support real media queries in the current version, this approach is not really responsive design. But it's the perfect interim solution.



EC.Sound is a simple wrapper for SoundJS that enables Edge to play all kind of sounds easily. You first have to setup the sound system by creating a simple manifest (Array with all sound references) and pass it to the setup() method. Then you can use the play() method to play the sounds. So let there be sound!

Prepare sounds

Load sounds

Play sounds


Live Demo

Interactive SVG

Currently Edge Animate only supports SVG files within <img> tags or as background images in <div> containers. So you can neither listen for SVG events nor reach into the SVG structure to e.g. change the color of a shape. With the "interactive SVG" feature provided by Edge Commons you can enable on this. And the great thins is, that you still can place and animate the SVG as you always do.

Listen for custom event dispatched by the SVG

Live Demo

Advanced Logging

When your compositions get bigger and your scripts more complex you can't live without it: Logging. With EdgeCommons you get more advanced logging capabilities than console.log.

Using Logging with Edge Commons

Configuration Management

Sometimes you want to have a global configuration that can be used all over your composition easily. With EdgeCommons you get the infrastructure to setup a configuration object using an external JSON file or set it up during initialization of the composition.

Setup during initialization (e.g. in compositionReady)