The History of Web Animation.
Let’s start from the beginning. What is animation?
Animation, as described on Wikipedia, is the process of making the illusion of motion and the illusion of change by means of the rapid succession of sequential images that minimally differ from each other.
More simply put, an animation is nothing more than graphics in motion, is the visualization of change over a period of time, and although it might seem as if making animations is something rather new, there is evidence suggesting that motion in graphics was trying to be achieved since about five thousand years ago.
Take a look at this painting found in Shahr-i Sokhta, Iran. It’s one of the earliest examples of an artist’s attempt to show motion in graphics by means of animation. These are five pictures of a goat stepping towards a tree, climbing it up, eating the leaves and coming back down.
Now let’s see another version of the same graphics, but this time, in motion.
Today, animations are present in almost every product that can be viewed through a screen, but let’s focus specifically on a branch of animation made to perform, and be seen on a web browser. These type of animation is what we call web animation.
Web animation is “motion on the web”, which is achieved through different technologies and techniques, or by the combination of those. Motion graphics, Sprite animations, CSS animations, JavaScript animations, SVG animations, and WebGL animations are among the most common techniques, but we could extend this to include UI animations, web-based Game animations, and animated Data Visualizations. Other ways to conceive web animation is through the use of GIF’s, Java Applets, Flash, and Shockwave, but these technologies are being less and less used over the last years, or even deprecated.
Nowadays, web animation is everywhere, almost every web ad, website, web application or program that runs on a browser, contains some kind of web animation, some are very subtle and others rather pretty complex, but it wasn’t always like this.
Before we were able to create web animations, websites were just plain documents that could only link to other plain documents. This is how the first website ever created looked like, back then, even CSS was missing.
So, let’s go back to where it all started. In 1987, CompuServe introduced the Graphics Interchange Format, better known by its acronym GIF. One of the first usages of the GIF on the web as an animation tool was by giving companies the opportunity to enhance their logos by rotating them 360 degrees, and by therefore giving the illusion of 3D on the screen.
But after the GIF was introduced, web animation pretty much stayed the same way for another 10 years. In the late nineties with the introduction of a technology called Flash, everything on the web became animated.
Flash is a now deprecated multimedia software platform created by Adobe, used to produce web animations, rich internet applications, desktop applications, mobile applications and games, and with not many other options to create engaging experiences back then, Flash quickly gained popularity among developers and populated the web for many years.
But then, mobile was born, and with it, Flash started to die because mobile devices couldn’t handle the intensive CPU load that Flash files produce when processing them, which drains really fast the battery of a device. But not only the born of mobile dictated the future of Flash, Apple decided not to support Flash at all in any of their mobile devices, like the iPhone and the iPad, therefore significantly improving their battery performance and life.
After a colossal battle between Apple and Adobe, Apple found its victory, users started uninstalling the Flash player, and developers around the world started removing all Flash code for good. The war between these two giant corporations is what has dictated the technology stack used to make web animations nowadays.
After Flash’s death, the internet became once again a static place, non-animated, or semi-animated with GIFs, until CSS, and specifically until CSS3 was introduced. So, if the GIF was the first version of web animation, this was followed by the second version called Flash, and this was followed by CSS3 as the third version, but JavaScript has increasingly become the technology of choice over the last few years, especially for achieving large and complex web animations called sequences. Is worth mentioning that the introduction of HTML5 has also helped improving how web animation is done today.
There is a handful of JavaScript frameworks that can do what CSS and native JavaScript alone cannot do just yet, the most common of these libraries is the GreenSock Animation Platform or GSAP, an animation library originally built for ActionScript (an object-oriented programming used primarily for the development of websites targeting the Adobe Flash Player platform in the form of embedded SWF files), which later was rewritten in JavaScript.
And there is also the new Web Animations API (aka WAAPI) an experimental technology in development, which promises native browser support to achieve complex animation sequences. This technology has not yet stabilized, but we can, and definitively should start learning it right now.
Today, motion on the web is basically achieved by using either CSS Transitions, CSS Keyframes, JavaScript Animations, or a combination of these. So if you see an awesome animation on a website, web ad or any other web-based product, chances are you’re looking at an animation created with one of these three technologies.
Take a look at this link to experience some awesome examples of web animation in action: https://www.awwwards.com/websites/animation/
Thank you for reading!
If you found this useful, please share some claps so more people can see it! 👏🏼
