Website Animation

Your Customers can understand better

We do web animation with Adobe Flash or HTML5/CSS3 Technology

With the new technologies in HTML5 and CSS3, we now have a lot more options for animation in web design.Lets start with the most common and widely known technique.


Flash

Flash is an Adobe product which is capable of creating complex animations, and has been the standard for animations, games, presentations and a lot more on the web for years. Flash isn't a native browser technology, and requires a plugin to display on a web page. The software used to create Flash animations isn’t free, although the plugin used to view them is.
The drawbacks of using flash for animation can be large files sizes, and more recently, no Flash support on devices such as iPhones and iPads.
HTML5 has been hailed as the death of Flash, but flash is still the only mature tool for creating animations without dealing with lots of code, so for that reason alone it still has it’s place.¬†Adobe have created a tool for converting Flash into HTML5 technologies, so while the Flash format may die out on the web, Flash as a software for creating animations may live on.


SVG

SVG is a browser based technology, and is supported in all browsers except IE, although there is a plugin that can enable support. SVG is capable of basic animations and can only display vector graphics, so animations in SVG aren't as great visually as some of the other options. These graphics can be animated using JavaScript, but for long or complex animations, a lot of code needs to be written. The basic graphics of SVG make it great for data visualisations.


CANVAS

Canvas is a new element in HTML5, which allows complex rendering of graphics in the browser and the manipulation of images. These graphics can be animated using JavaScript, and with Canvas and JavasSript, complex animations, previously only achievable with Flash, can be created. Even game engines have being created that use Canvas.
One drawback of Canvas is that it doesn't work in IE. There are JavaScript libraries that can be used in IE to give it partial Canvas support, but all these scripts do are map Canvas functionality to something in IE called VML, which is similar to SVG in that it can only display vector graphics.
Animations in Canvas can require a lot of JavaScript, and while there are tools being created to allow the creation of Canvas animations with a point and click interface, currently you would still need to write a lot of code.


CSS

With JavaScript, any attribute in CSS can be animated. There are a lot of JavaScript libraries available to make this easier as well. Just by animating CSS attributes, HTML elements can be moved around on the page, have their height, width, opacity and colour changed, plus many more effects. In CSS3, we have even more options for effects with the transform attribute, which can scale elements, move them without using positioning, and rotate them.

While a lot can be achieved with animating CSS properties, it’s not really capable of the more complex animations that can be achieved in Flash or Canvas.

A common use of animating CSS attributes like this is to change the background position of an element, which can give the impression of scrolling movement.

One technique that is often overlooked, is to cycle through static frames of a pre-drawn or rendered animation simply using an image element or background image that is switched out for the next. A great example of this is the demonstration of the iPad 2 cover.

With the new animation features in CSS3, CSS can now be animated even without JavaScript. The main advantage of this being that animations will still work, even when JavaScript is disabled.

Who Knew