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.
For the full sample, see the Animating the Opacity of an Element Sample.In this fiercely competitive environment, companies are frantically looking for ways to capture and retain people’s attention.
The full sample also shows how to animate the opacity of a Color within a LinearGradientBrush. Example Ĭode has been omitted from this example. When the example is run, the first button completely fades in and out of view, while only the background of the second button fades in and out of view. The second button is also animated, but the Opacity of the SolidColorBrush used to paint its Background is animated rather than the opacity of the entire button. The Opacity of the first Button is animated from 1.0 to 0.0 over a Duration of five seconds. In the following example, two buttons are animated so that they fade in and out of view. Animating the Opacity of a Brush provides performance benefits over animating the Opacity property of an element.