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.
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.
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.
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! 👏🏼