EVOLUTION AND SIGNIFICANCE OF WEB ANIMATION

Web Animations defines a model for supporting animation and synchronization on the Web platform. It is intended that other specifications will build on this model and expose its features through declarative means. In addition, this specification also defines a programming interface to the model that may be implemented by user agents that provide support for scripting.

It is used on all kinds of  web pages. They can be small web animations that happen as a visitor is scrolling through a web page to draw attention to an element, an animation that demonstrates a product, or a promotional web animation that shows off something entertainingly and engagingly.

 

EVOLUTION

Animation is just a series of still images shown in sequence, so the most obvious way to add animation to a Web site is to post a series of bitmap images that the user’s browser displays in sequence. This sort of animation, called GIF animation, or GIF89, was the first Web animation to catch on, and it is still very popular today.

The main advantages of GIF animation are that it is incredibly simple to work with and it is automatically recognizable to most Web browsers. The disadvantage is that you have to keep the animation pretty simple to keep the file size down. After all, each frame is a full bitmap image.

This is an excellent way of illustrating a simple concept, or just adding some eye-catching decoration to your site; but Web designers and Web users found it to be wholly inadequate for communicating more complex ideas or adding a real sense of motion to Web sites. Furthermore, you can’t add sound to a GIF animation.

 

The big web animation boom came with the introduction of Flash in 1996 when Macromedia announced their web plugin and accompanying frame-based animation tool: Macromedia Flash. Flash played a leading role in bringing new capabilities to the web. From audio and animation to interactivity and video, Flash helped to push the internet forward.

The opportunity to build simple, lean, vector-based web animations across entire sites that included interactions. Nevertheless, Flash offered a glimpse into the possibilities of dynamic web design, freeing up designers to experiment and unleashing a period of rapid web design evolution. Flash animations are lightweight and relatively easy to make.

 

Unfortunately, Flash animation wasn’t intended to be responsive, didn’t function well on all devices, and was eventually dropped from all popular mobile devices. While the file size was relatively small, Flash was not well-optimized and ended up CPU hungry, which was a problem on mobiles as well.

Today, as Flash is obsolete, we have different needs for web animation. Tools must be flexible and light. Web designers must create responsive and adaptable content for different devices. Technology has matured to a point where even underpowered mobile devices have the bandwidth and processing power to handle very demanding web animations and high-resolution video content.

HTML5, CSS3, JavaScript, and SVG (scalable graphics) seem to be the best solutions for web animation. Using these modern web technologies and languages will help tackle most, but not all, of the above problems.

clean fashion label tab mockups

SIGNIFICANCE OF WEB ANIMATION:

Ø Web animation can be used to attract attention, engage people better, and communicate more clearly and effectively. It can engage and hold people’s attention longer than just a static web page. Web animation should be smooth, meaningful, and support the visitor’s journey.

Ø One of the essential things about animation is timing. Proper timing gives physical and emotional meaning to an animation. The experience should be seamless and logical. If the animation is not fluid ,people could perceive it as a bug and lose all motivation to explore the website further.

Ø Web designers are hoping to capture and hold our attention, and maybe add an unexpected jolt of delight. Web animation can be used to visualize various steps in a complex process or idea, to illustrate a simple marketing message, or to move things on a web page in a natural and fluid way as people scroll — again, to draw attention to something.

 

TO ACHIEVE THIS THE DESIGNER HAVE TO:

· Examine the existing website design (if available)

· Check the target audience and the hardware platforms they use

· Check the site load times and CPU load

· Explore other alternatives

· Keep an eye on usability

The decision to use web animation should be treated as any other design decision; web designers must weigh the pros and cons and make sure that the user experience is not compromised. They should also work with developers to ascertain code requirements and ensure they won’t get stuck with inefficient code that may have to be tweaked down the road.

Modern web animation technology has matured significantly in the last 20 years — performance, available bandwidth, and rendering quality have increased. However, designers should tread carefully and only add animation to a website if it meaningfully enhances the user experience.