Do you have animations on your website? We will tell you why to give them a chance

Animated video, redrawn photo, slider on the main page, parallax effect, or a button that flashes like crazy when hovered over or just subtly changes its color. Animations on the web are a useful tool not only for distinguishing your website from others – static ones – but they can also:

• inform about what users would otherwise have to read (and probably wouldn't)
• encourage visitors to take the desired action
• entertain
• create a (positive) emotion in a person
• serve as navigation on the website
• enhance the overall impression for the visitor

However, even with animations, too much of anything is harmful, and the line between a workable solution and something annoying or overdone is thin. So how to design elements on the web that will be interactive and more memorable? We will dive into practical examples a bit later; for now, let's discuss some theory. 

If you are interested in examples right away, skip to the second part of the article.

A means for a more natural experience

Animated elements are significantly more pleasant to the human eye when they are smooth. In real life, nothing moves in a jerky manner. If the movement is not smooth, our brain does not perceive it as natural. We then have to exert more effort and attention to orient ourselves to what is happening around us. Poor animation can also overshadow surrounding content that the user cannot perceive. 

An example can be the website of the largest leasing provider in England. The site is unforgettable in terms of effects, but let's see if you can remember at least one word that you see...

When designing animations, also consider physical properties and work with them. An example is gravitational acceleration, where a flying object takes a moment to reach the correct speed. A falling object usually bounces off the ground at least a little. So let your animations look as realistic as possible.

What type of animations do you want?

Animations can be divided into two main categories:

• micro-animations (simple animations that support content) 
• animations as content (complex animations that represent content on their own)

The choice of a specific type of animation mainly depends on what you want to achieve with the animation and which element of the website needs to be animated.

Regular visitors appreciate moderation

If you want animations for your e-shop, internal system, or application that users frequently use, it is not desirable to emphasize complexity and overwhelm with a multitude of effects. Such a type of animation may capture the user's attention at first, but during repeated visits, it will likely hinder them and very likely annoy them in the end. In the worst-case scenario, it could result in the user stopping using your application. 

In this case, it is advisable to use micro-animations or simple animations that can engage users. They primarily make the user interface more visually appealing and clearer. 

Animations that work great for this purpose include:

• buttons
• pop-up windows
• banners
• animations during content loading

The special effect of the human eye won't disappoint

In the case of a presentation website, gallery, or portfolio, it is better to use more complicated and complex animations that capture the user's attention at first glance. This will increase the likelihood of their return visit or even sharing with others. Complex animations can be programmed to tell an entire story, attract the attention of potential clients, or visually appealingly promote yourself or your product. 

If you desire something special, you can set the animations to respond completely randomly to certain stimuli. This can be:

• user input
• mouse movement
• sound from the microphone
• selected music

This type of animation is called generative because your experience with it is completely unique every time.

Animation Implementation

You have chosen the type of animation, specified your vision, and the graphic designer has prepared it for you. Now it's time for the front-end developer and their expertise to bring the animation to your website. 

We most commonly use these selected technologies:

CSS

The advantage of using CSS animations is primarily their low data volume, high effectiveness, and the fact that they do not require any external libraries for implementation. Additionally, there is no need to use JavaScript.

JavaScript

Compared to CSS animations, JavaScript animations offer much more freedom. However, their disadvantage is the necessity of an external library. Through it, the developer implements animations on the web. JS frameworks usually provide pre-made basic animations: for example, scaling, flying away, or rotation.

SVG

SVG is a vector format based on the XML standard. It is ideal when you want to place simple graphics independent of resolution on the web – such as icons or logos. Vector graphics can be resized without loss of quality, and they are also data-efficient. The disadvantage of SVG animations is the creation of fallbacks (alternative solutions in case SVG animations are not supported). We also do not recommend using SVG for complex animations. 

Canvas and WebGL

The Canvas and WebGL APIs allow animations through JavaScript and the HTML5 element <canvas>. The Canvas API is most commonly used for drawing 2D graphics and can easily handle colorful animations and complex elements. The second option, also in HTML5, is the WebGL API, which we recommend for 2D and 3D animations. WebGL is appreciated by visitors of websites with complex animations because this framework can handle up to 60 frames per second. 

And what animations can you have on your website?

Menu

Do you want to make your customers' experience on your website as enjoyable as possible? Pay attention to even the smallest details – one such detail is the animation of the hamburger menu in mobile view. A functional and visually pleasing subtle movement that reveals the complete menu of your website. In the example, you can see the website we prepared for the client IRLaB

Carousel and animations in the header

We categorize carousels as animations. We know that among web developers, this is a frequently discussed element with both supporters and detractors – if you have a justification for its use on your website or e-shop, we say: “Go for it!”

Animations in the header that enhance the text message can also be found on our website. This is what a page offering enterprise solutions might look like.

Scrolling Animation

You can capture the attention of website visitors continuously. On the Mercedes-Benz website, we created an animation where individual sections gradually appear.

Decorative Animation

Some animations can serve a design function. These in the example are not from our work, but we like them so much that we simply cannot not show them to you.

Dynamic Background Animations

Even while you are working on something, subtle animations can run in the background to make your focus a bit more enjoyable. You will enjoy the animation of fluttering fireflies in the glow of the night city while programming.

Did you also like the option of having your own animation? Contact us and together we can create a design that perfectly fits the identity of your website.