There is no denying that web design has changed incredibly over the years! One thing that has not changed, though, is that we much prefer websites that are vibrant and visually appealing. We love when a website captures our attention with something unique and exciting from the moment we land on it. Animation plays a very important role in this. In this blog post, we are going to take a look at animation in website design, including its history and why it’s used so much.
The History of Animation in Website Design
Web animation is simply a term used to describe any motion on the web. This is achieved using a number of techniques and technologies. The most common techniques include WebGL animations, SVG animations, JavaScript animations, CSS animations, Sprite animations, and motion animations. This can even be extended to incorporate animated Data Visualizations, web-based Game animations, and UI animations. Additional ways to conceive web animation is via the use of Shockwave, Flash (RIP Flash), Java Applets, and GIF’s. However, these technologies are being used less and less now.
“So, where did it all begin for web animation?”
Before we were able to create website animations, sites were simply plain documents that could only link to other plain documents. So, where did it all begin for web animation? Well, this would be when the Graphics Interchange Format was introduced by CompuServe in 1987. This is better known by its acronym GIF. As an animation tool (very similar in concept to traditional animation; a slightly different image, swapped out, frame by frame),
one of the initial uses of GIF on the web was giving businesses the ability to improve their logos by being able to rotate them 360 degrees, which gave the illusion of 3D on the screen.
After the introduction of GIF, web animation virtually stayed the same for around another decade. Everything on the web did not become animated until the late ‘90s when Flash was introduced. Created by Adobe, Flash is a multimedia software platform that is now deprecated. It was utilized to create mobile applications and games, desktop applications, rich internet applications, web animations & full motion video. Flash soon gained popularity amongst developers, as there were not a lot of options for creating engaging experiences back then, it was also extremely bandwidth friendly (think 52k modems and movie streaming, Flash made this possible). Consequently, Flash populated the web for a lot of years.
“The infamous battle between the two big corporations resulted in the technology stack that is utilized for creating web animation today….”
Fight! Apple v Flash
However, then came the birth of smart phones, and this also coincided with the death of Flash for several reasons – Steve Jobs does a nice job (sorry!) of explaining his reasons for not allowing Flash on his mobile products in his open letter found here. But to summarize; proprietary tech, performance & battery issues where the main reasons for it’s removal.
As a consequence – Flash code started to be removed by developers across the world. The infamous battle between the two big corporations resulted in the technology stack that is utilized for creating web animation today.
After the death of Flash, the Internet was once again a static place, or it was self-animated with GIFs or purely non-animated. This was until the introduction of CSS. So, to recap, the first version of web animation was GIF, the second version was Flash, and CSS3 was the third version. Nevertheless, JavaScript has incredibly become the favored technology choice over the past few years for achieving complicated and big web animations, which are called sequences. It is also worth pointing out that HTML5 and the introduction of this has assisted with how web animation is done today.
There are a number of JavaScript frameworks that have the ability to do what native JavaScript and CSS alone are not able to do. GreenSock Animation Platform or GSAP is the most common of all of these libraries (showcase animations found here). This is an animation library that was built initially for ActionScript. ActionScript is an object-oriented programming that is utilized primarily for the creation of websites that target the Adobe Flash Player platform in the manner of embedded SWF files. JavaScript re-wrote this at a later date.
Today, motion on the web is achieved basically by using either JavaScript Animations, CSS Keyframes, CSS Transitions, or a mixture of these (showcase found here). So, if you see an incredible animation on a site today, a web-based product, or a web ad, it is likely you are viewing an animation that has been put together with the use of one of the three technologies mentioned, or several.
“Animation has become an integral part of modern website design”
From simple page loading & entrance animations to on scroll animations; there are so many different ways that animations are used in web today.
Some of the different web animations that are popular today are as follows…
- Animation backgrounds
- Page motion
- Scrolling
- Attracting attention
- Sildeshows and galleries
- Hover
- Navigation and menus (non-scrolling)
- Loading animations
Why Do We Love Animation?
Well, for web designers, animations drive results. A web designer will try to create an eye-catching website that will improve conversions, as well as attract users to view, click, and buy things on the website. Animations tend to play a very important role in these conversions. Improving the UX/UI of a web app or website through animation is one way that incredible conversions have occurred. Users feel very much attracted to these animations. They value the smoothness and innovation of them.
Simplify the Complicated
They can also assist with helping to explain different processes to users. If you have a product that consists of many different parts or you offer a service with a lot of different elements, it can be challenging to explain this, especially on a website. You’re going to have a limited amount of space and a very small window of opportunity to make a big impact. No one wants to read an essay on the product or service you provide. Instead, an animation can make the complex seem easy. It can present processes and instructions in a manner that is impactful and easy to digest.
Animations have also become so popular because they capture and hold our attention. User engagement is not easy to secure in an age of constant entertainment. The typical consumer interacts with hundreds of brands on a daily basis. Making your brand stand out and cutting through the clutter is no small feat. Eye-catching animations can achieve this, though. The moving element or brightly colored graphics will immediately catch a user’s attention. They more intriguing and unusual the animation, the better.
It’s the Internet so Time is Everything!
We also love animations because they ensure our time is not wasted. Animations optimize our web experience and they cleverly alter perceived site performance when we are transitioning from one page to another. Perceived performance relates to how long a user feels like they have been waiting for a website to load. A blank loading page is, quite frankly, boring! A branded loading page animation can make it seem like the page is loading a lot quicker because you’re distracted by the colorful and exciting graphics on the screen.
“We also love animations because they ensure our time is not wasted…”
Aside from this, modern animations are designed to mimic the deceleration and acceleration of the natural world. This is achieved through easing choices, which are based on whether or not the user anticipates the action. Humans perceive movement and changes differently depending on whether the change is unexpected or they think they have initiated the change. The easing of animations today make the user feel like the interface of website is reacting to their actions. So if the response has been initiated by the user, for example, a hover or a click, the animation should begin quickly and then decelerate. As the user was expecting the action, they are not shocked by the initial speed. The use of easing in animations means that they work in line with what we expect, and this makes them more enjoyable and it makes them feel like they are working for us.
All in all, there are a number of different benefits that are associated with using animation on your website. This includes increasing audience retention rates, increasing your return rate, and getting more quality leads. Aside from this, website animations can help to increase customer loyalty, engagement levels, and professionalism too.
So there you have it: everything you need to know about animation in website design. There is no denying that animation plays a critical role in web design today. We hope that the information that has been provided in this blog post has helped you to get a better understanding regarding how animation has developed over the years and the significant role of animation in web today.
