Create Web Animations Using HTML5, CSS3 & JavaScript With The Help Of Adobe Edge

Flash used to be the king of web animation, but now it’s been slowly abandoned because of the possible future ruler: a combination of HTML5, CSS3, andJavaScript. Even though Adobe is still strongly supporting Flash, it is also beginning to embrace the new alternative.

The proof is Edge – the new multi-platform tool from Adobe that will help users to create web animations using HTML5, CSS3, and JavaScript.

Get To The Edge

At the moment, Edge is still in beta and available for free. You can download the application after signing in using your Adobe ID. If you don’t have one, you can easily create an Adobe Account.

Then download and install the application according to the operating system that you use. Edge comes in two flavors: PC and Mac. The beta version doesn’t require a serial number, but it will expire within the next 5 months.

At the end of the installation process, you’ll see a notification window stating how many more days are left in the pre-release period. My guess is that the tool will go commercial after the beta period is over, and we all know the pricing range of Adobe’s professional products. So if you want to try Edge out for free, you’d better download it as soon as possible.

Playing Around With Samples

To help users understand about its new tools, Adobe provides a “Get Started With Edge” video tutorial and several downloadable sample animations. It’s recommended that you watch the video and play around with the samples.

The video is accessible via the “Get Started” pane which will appear when you first open Edge. The pane also gives you access to create a new animation file or open an existing one.

The interface is divided into several main panes. The “Properties” pane on the left shows the composition tools of the selected elements.

The “Timeline” pane at the bottom shows the choreography of each animated element related to the timeline.

And the “Elements” pane allows you to select one item to edit from all the existing elements.

Create A Simple Text Animation

The best way to understand any application is to use it. So, let’s explore Edge by trying to create a simple animated text.

• Go to the “File” menu and choose “New“.

• A “stage” will be opened. This is the canvas where you can “choreograph” the animation. You can customize its name, size, and the background color from the Properties pane.

• Next, choose the “Text” tool and write something on the stage. Again, you can customize every aspect of the text from the Properties pane.

• To animate the text, go to the timeline pane and modify each element of the text by deciding what changes will happen to it, and when the changes will happen.

Basically, here’s what you should do :

• Choose the diamond next to the “text” item on the Timeline pane,
• Drag it to the position that you want,
• Select the text from the stage,
• Make the changes you want to the text.

You can add more text and other elements such as rectangles and/or rounded rectangles. Rinse and repeat the animating process for the other elements.

The last step is implementing the animation on your website. To do that, you have to save the animation as an HTML file in a folder, open the HTML using a plain text editor, then copy and paste the code to your webpage (or wherever you want the animation to appear). Don’t forget to put the “edge_includes” folder in the same location as the HTML file/code.

The Next Move

Our experiment here is very simple, but you can use the basics to create more elaborate web animations using Edge. The app itself is still in its early stages, and there’s no doubt that it will have more elaborate features in the future.

At the moment, HTML5 is just making its baby steps into the virtual world and no one can tell when this newcomer will take the throne. But Adobe’s support for the new standard is surely blowing fresh air into the web.

So what do you think? Are you still supporting Flash or will you stand behind HTML5? Have you tried Edge? Share your opinions in the comments below.