

Creating web animations became a streamlined process that didn’t add much to webpage load times. Only a few kilobytes in size, they are distributed in SWF file format and a file using sound with crisp vector graphics. 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.įlash animations are lightweight and relatively easy to make. The opportunity to build simple, lean, vector-based web animations across entire sites that included interactions, created what could be called web design’s “baroque” period with (too) many animated elements crowding the landscape. From audio and animation to interactivity and video, Flash helped to push the internet forward. Flash played a leading role in bringing new capabilities to the web. 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 (after they acquired FutureSplash Animator, a vector animation program). This changed with high-speed internet becoming more commonplace in the 21st Century, and as a consequence, web animation became better looking with millions of colors, and smoother with higher frame-rates. The drawback for designers having to compress GIFs to the smallest possible size was a limited 8-bit palette, which resulted in a lot of dithering. The result was a low-resolution, pixelated sequence.

Especially back in the early days of dial-up and slow internet speeds, GIFs were bandwidth hogs. GIF animations were the beginning of a renaissance in web design, but they were not ideal. An unfortunate shortcoming though is that the GIF file format doesn’t have variable transparency and doesn’t support an alpha channel therefore, all pixels are either fully opaque or completely transparent. GIFs are suitable for short loop animations, image sequences, and even short video loops. They’re on Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram, and Facebook. It inspired other web designers and developers to incorporate GIF web animation as a quirky, eye-catching element into their websites.įast-forward 20 years and animated GIFs are now everywhere. The Batman Forever promo site was one of the most popular sites at the time. Visitors were greeted by Batman’s flight towards them, animated as a picture sequence. One of the first additions of a GIF animation to a website was on Jeffrey Zeldman’s Batman Forever in 1995. However, some designers made a concerted effort-despite the technical and bandwidth challenges-to include early forms of web animation in order to make them more dynamic and attractive. Webpages were mostly based on graphic design and layouts from the print world. How Web Animation Got Started, the Rise of GIFsĭuring the early days of the World Wide Web, things were rather static and boring. 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.Ī landing page with motion and web animation (by Mason Yarnell for Mixpanel). Web designers are hoping to capture and hold our attention, and maybe add an unexpected jolt of delight. If a static picture is worth a thousand words, how much is an animation worth? First, by capturing our attention, and second, using video and animation to get the message across. The technique is a one-two punch effect designed to deliver marketing messages. As we catch something moving fast out of the corner of our eye, the brain alerts us in a split-second because our subconscious brain has already reacted to the danger before our conscious mind has had time to process the information.Īdvertisers know this, and it is why we have animated street advertisements at bus stops and on subway platforms, video ads popping up in social media streams, and electronic billboards with full-motion video. The split-second reaction to movement in our environment was developed out of the need to survive and triggered by environmental stimuli perceived as potentially threatening or harmful people pay extra attention to things that move. As we go about our daily lives, the endless stream of visual stimulation gushing at us from animated ads on the street, videos on our mobiles, not to mention our social media feeds, creates a sense of constant movement that is vying for our attention. In this fiercely competitive environment, companies are frantically looking for ways to capture and retain people’s attention.
