Aug 312011
 

With the advent of HTML5 and CSS3, it is possible to create lovely animations using these technologies, along with JavaScript. The problem is though, you basically have to hand code everything. There is, as yet, no application that gives you a graphical interface (á la Flash) that allows you to drag and drop items, animate them just choosing options from a menu, and so on.

However, in the last year or so, new applications have been appearing, that are starting to give you a drag and drop environment that allows you to do just that. Adobe has recently released a new application called Edge (in beta from only) on their labs web site (labs.adobe.com).  So now you can start animating with CSS and JavaScript using Adobe Edge, and using an interface that is drag and drop, guy etc.

It is a very simple application, and is still in beta stage, but it is definitely worth downloading to have a look and see what Adobe are up to.

To get started, just download the application, double-click to install it and open it up. It has a simple interface, you can import items easily, and each item that you import or create has its own layer in the timeline which is nice. Here is the interface…

Edge interface

Edge interface

Although the importing is basic (gif/png/jpg/svg), it covers the standard web formats, and the inclusion of svg is a very nice touch.

You can create items, but only rectangles and rectangles with round edges, and text. That is it.

edge tools

edge tools

However animating is very easy – you can have keyframes for opacity, scaling, width, height, rotation, skewing, position, etc. And once you have added the keyframes, you can just click on the animation in the timeline and set it to one of 28 types of easing. All very easy to select and choose. You have a properties panel…

edge properties

edge properties

edge properties2

edge properties2

…and from here you can choose to insert your keyframes for your various properties. Once you have done that, selecting an animation in the timeline then allows you to assign an easing to to it very simply…

edge easing

edge easing

All in all I would recommend anyone with an interest in using CSS/JavaScript/HTML to animate things to download this application and take it for a spin.

 

Did you like this? Share it:

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>