I recently Installed Adobe edge, the creative program that enables you to create animations based on good ol’ HTML, CSS3 and JavaScript collectively known as HTML5.
I wondered how difficult it would be, how good the tool is and whether or not I could benefit from using it. Well, it is quite straight forward. It reminds me of when I first started to learn flash – then I stubbornly decided against learning it and later on found a justification for my laziness which came in the form of pro HTML5 activist. It comprises of timelines, a stage and key points along that timeline. It is also very similar to After Effects in that respect – although once you have moved away from simply translating and transforming objects and engage in wizardry such as tracking motion, creating fire effects etc. the similarities abruptly end.
The first thing I thought I should attempt is quite naturally my Aol panning video that I have used on my portfolio home page and my Behance Aol project since both programs have the timeline and key points, tweening, easing etc.
The following video is the After Effects built animation…
below that is my HTML5, Plugin free animation courtesy of using Adobe Edge.
(it sometimes fails to load – refresh if you don’t see the animation below)
It has come out quite well. I had major problems getting it to appear on my WordPress based blog. It seems more JavaScript than any CSS3 though looking at the Google chrome inspector you can see that the JavaScript is executing a number of instructions into the HTML with CSS3.
I’m am excited to see what else I can create and hopefully I may reproduce this on my home page as part of how I display my portfolio!
