Animation on the Web: A Moving Past, Present and Future
By Flying Hippo
Everyone has a favorite animated movie. Whether you grew up with Snow White or The Land Before Time, animation has likely been a part of your life since birth.
Now, just like most everything else, the internet has opened possibilities for animation that seemed impossible even ten years ago.
Animation has been on the web since the days of bulletin boards — GIFs, marquee text, Adobe Flash, video and motion (in all sorts of forms) have been utilized in some form on the web for years. Most of the animation techniques, however, have either been heavy-handed or only worked in a container, affecting a small portion of a website. Today, we can create more complex, and more nuanced animations.
While complex animation on the web is relatively new, we have decades of technique to study through animated movies, cartoons, etc. Disney especially has a strong foundation of animation principles that were developed when they first started creating animated movies.
Some of the techniques in the video that are discussed are timing effects (example: easing vs. linear timing), exaggeration, focus, shape transition and others. Basically, all of these techniques make animations seem more “real.” Animation is really just a series of still pictures, and the more realistic those pictures are, the more relatable they are to your viewers.
Today, animation can play a much bigger role on a website. We can use animation in the traditional sense of animating a subject or object to aide in the telling of a story, or we can utilize certain animations to help guide users through an interface.
Here are a few examples of web animation that helps users along. Using measured animation will almost always result in a better user experience than an instant change:
• Popup boxes (the button you click becomes the popup — very clever!)
• Transitioning from image to text
• Adding and removing items from a list
The Future
As technology advances, online animation is only getting more colorful and expressive. Adobe Flash was once the platform of choice for online animators, but now it’s becoming antiquated, as it’s incompatible with many mobile devices. Apple even rejected using the platform on their iOS devices:
“Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs,” wrote Steve Jobs in a 2010 news release. “But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.”
As old standards fade, new ones take their place. HTML5 is stepping up to replace the standard that Flash left, and it’s been impressive so far. An added bonus of using HTML5 is its SEO-friendly nature. Since Flash exists only in a container, Google crawlers can’t see what’s inside. Therefore, your Flash video will likely be buried under pages of Google search results. In fact, Google recently released Google Web Designer, a tool that helps designers create interactive HTML5-based designs and motion graphics in a WYSIWYG environment.
Still, the more animation changes, the more it stays the same. Despite platform, dimensions or any other nuances, animation is essentially a series of moving pictures. And they’ll keep on moving as long as the web progresses.
Photo courtesy vancouverfilmschool via Flickr Creative Commons
