Web Animation Generators

Sponsors

2nd Aug 2011 | Posted in HTML5

In my July post, I discussed about CSS3 and the exciting days of web design.

In less than one month that I was trying out some CSS3 generators, Adobe realeased as free preview, Edge. (1st of Aug ’11, first day 50K downloads!).

Basically, it looks a Flash-like environment software where you can do key frames, tweens, designs and make animations ‘BUT’ using web standards built in HTML, JavaScript, and CSS3.

The features in this preview release are:

  • Possibilities to create new compositions with drawing and text tools.
  • You can animate position, size, color, shape, rotation and more at the property level.
  • Bring motion to existing HTML files while preserving the integrity of CSS-based HTML layouts. (Edge stores all of its animation in a separate JavaScript file that cleanly distinguishes the original HTML from Edge’s animation code.)
  • Copy and paste transitions, invert them, and choose from over 25 built-in easing effects.
  • Edge works with HTML content and adds animations, motion and interactive elements with HTML 5, CSS and JavaScript.

Watch a Demo from Adobe:

As a no Flash Designer (remembering the old days when I was buying Fl books and doing animation tutorials), I’ve always been interested in animation websites.

I like to have javascripts on my sites and make some fancy movements to containers and images (in a rigorous web usability standard, of course…) and I’m happy to see the fast progress of the web.

With Edge, we have other cool applications which can make “Flash effects” in a web enviroment.

I can note few here (if you know others please let me know):

After I’ve got into Christian Heilmann post, Living on the Edge and saw these animation tools more deeply, I feel they are improvements of how we can design and devolop easier fancy animations and a good start to take these in a HTML5 enviroment. Because this has to be our goal, to build in HTML5!

Welcome to the World Wide Web Revolution!

  • Azhim

    I loved your article! Thank you very much!

  • Simonjameslucas2001

    Nice post…didn’t know about Radi :-) . Will be cool to see how these all develop in the creation of mini sites / apps!

  • http://riccardofala.com Riccardo Fala

    Thanks Azhim!

    You are welcome!