Adobe Edge, the first HTML5 animation


How to create an HTML5 animation with Adobe Edge, complete example

In a previous article, we quickly looked at the installation and interface of Adobe Edge, promising to create a real application, which we are going to do in this article.

We start immediately by opening Adobe Edge and creating a new project for our animation: a ball that bounces on a football field.

The stage

Adobe Edge provides an HTML5 / CSS / Javascript structure and the main container of our animation is represented by a <div>.

We can choose the dimensions to be applied to the main layer acting on its properties: for example, we can decide the dimensions.

Change the stage settings
Change the stage settings

Furthermore, we can decide if and how to visualize the elements that go beyond the dimensions of the stage.

Upload images to Adobe Eg

Attached to the article we find the images we need, a soccer field and a ball, we can upload them to our project by clicking on the menu File > Import.

Load the images
Load the images

Once the images are loaded, we find them in the Elements panel, nested under the stage as further <div>. We just have to start using them: the football field will use it as a background, so it’s better to lock it with a padlock, while we focus on the animation of the ball.

Object properties
Object properties

As the figure shows, we can act on objects thanks to a series of parameters: position, an angle of rotation, dimensions, deformations, scale factors. Each of these parameters can be involved in animations, so we can zoom in on an object and at the same time rotate it and move it.

In our example, we limited ourselves to modifying the scale factor of the ball, initially small, then brought to natural size and shrunk again, with a rebound effect.


Please enter your comment!
Please enter your name here