At Yalantis, we’re huge fans of creative and beautiful animations. We believe that well-designed animations can contribute greatly to the appeal and user-friendliness of web and mobile apps. And we’re always open to sharing our own ideas on animation development with others. You can check out our GitHub and Dribbble accounts to see examples of our work.
These days, different types of animations are especially popular among mobile app developers, who see them as a great tool for improving an app’s usability.
Read also: 7 Types of Animations for Your Mobile App
However, animations have also become popular among web designers.
You probably recognize that animations can attract attention. But what do you know about the other roles that animations can play in your app?
Animated objects can be used for many purposes: to keep users engaged, put the focus on particular information, give feedback, and guide users through your app or website. In addition, creative website animations can get talked about and make your app or website popular.
Today, we’re going to talk about basic types of web app animations and their purposes. After reading this article, you’ll also understand how much it might cost to add animations to your own web application.
Types of web app animations
To begin, let’s examine several types of UI web app animations and see what you can use them for.
Waiting isn’t fun, is it? When you’re waiting for something you might look at your watch frequently, try to occupy yourself with something else, or just gaze straight ahead.
When visiting a web app, users can also face a wait as some web app elements load: the home page, other pages, PDF files, tables, maps, videos, and other content. To keep your users from getting bored or annoyed while waiting, your web app should use loading (or waiting) animations.
Loading animations can brighten up the wait and create the sense that your app is running faster.
There are countless types of loading animations that spin, jump, or disappear. You can also use short cartoons, progress bars, or shape-changing animations
[Loading animation. Image source: Dribbble]
The main goal of welcoming animations is to engage users from the first seconds of visiting your website. A user’s first impression is significant, and creative greeting animations can make your web application inviting. Moreover, they can entertain users and make them want to use your product again.
Welcoming animations can be of various types. We’ll examine the most common to understand how they captivate people.
1) Particle animations
One of the most eye-catching welcoming animations is the particle animation. Particle animations may appear on a web app’s homepage. They help users relax, as moving particles can have the same influence as light meditation.
Particle animations can be interactive or non-interactive.
Interactive particle animations (or real-time animations) can be interacted with using the cursor. In other words, these animations respond to the user’s cursor movements. Most users prefer being able to control animations, and a web app with this type of animation can be hypnotizing. If you want to see an example of real-time animation, visit Particle Love, a website created by Edan Kwan.
Non-interactive particle animations don’t need a user’s participation, but they can impress too. Moreover, these animations can run in the background.
[Non-interactive particle animation. Image source: Dribbble]
Typography (or type) animations also belong to the category of particle animations. Type animations are connected with images of moving letters and can be either interactive or non-interactive.
If you want to see what an interactive typography animation can look like, visit the Yalantis homepage. To create our particle-powered letter Y, we used the famous particle.js library by Vincent Garreau.
2) Background video
Users’ attention can also be captured by soundless video in the background of a home page. You can see this type of welcoming animation on the Canvas United website.
This digital agency uses a background video that complements the central text on the website’s homepage. Also, notice that the background video is quite fast so users can see it multiple times. As a result, users get drawn in and spend more time on the website.
3) 3D animations
3D animations are another type of welcoming animation that has started gaining popularity lately since they provide more opportunities for designers to create realistic and complex visuals to attract attention. Some design experts have also begun a trend of mixing 2D with 3D objects, thereby creating deeper and more sophisticated experiences.
Just like background videos and particles, interactive 3D animations (the ones that react to key clicks, mouse clicks, button clicks, and finger movements on mobile devices) serve as decorative elements of a website. It’s common practice to place them on main pages to welcome users and entertain them in their first minutes of visiting a website. However, as the capabilities of web browsers grow and mature, we may soon see more 3D animations replace standard 2D approaches.
[Mixing 2D objects with 3D objects in motion design. Image source: PixFlow]
Even scrolling can be engaging if a web app uses interactive design in the form of animated scrolling. One of the main advantages of scrolling animations is the control they give users. You can choose from many types of animated scrolling: one-page scrolling, scroll drawing, background changes, and more. However, the principle is the same for all types of animated scrolling: animations move when a user scrolls on the page.
You can see one scrolling example below:
[Animated scrolling with the parallax effect. Image source: Dribbble]
Scrolling with the parallax effect is one of the most common types of animated scrolling. This type of scrolling can create an unforgettable browsing experience for users because it uses numerous backgrounds that move at different speeds relative to the foregrounds, creating a feeling of depth. Parallax scrolling was once trendy among web designers. Now, however, the effect is rarely used.
Make sure not to overload your users, however. Animated scrolling should help them get information and concentrate on the essentials.
Imagine you’re visiting a web app that has a complex structure. Moreover, it includes so many unclear buttons that you can’t even understand how to find what you’re looking for. After exploring the web app’s functionality on your own, you come to the conclusion that you’d better leave and start looking for a more convenient app.
If you don’t want your users to have the same negative experience with your web app, think over how to make it convenient and good looking at the same time. Animated navigation is the best solution. Well-designed animated navigation shows users what they should focus on.
Sidebar navigation (vertical sliding navigation) is the most suitable variant for creating a compact and clear web app. With small animated menu icons that are always within reach on the side of the screen, users can easily access your web app’s menu without scrolling. W3Schools provides a number of libraries to implement a sidebar menu navigation in yout web app.
[Animated sidebar navigation. Image source: Dribbble]
In certain situations, you need to inform users whether their actions have been successful. In other words, your web app should give feedback. Animations can help draw users’ attention to the actions they’re performing. When users notice these animations, they instantly understand if their actions are right or wrong.
Animations as visual feedback can be divided into warning animations and hover effect animations.
1) Warning animation
Your web app can warn users visually when they’re doing something wrong. For example, animations can tell users to repeat an action or not to click a button again if they’ve filled in a field incorrectly. Warning animations can take the form of red crosses, sad emojis, or other symbols that notify users about invalid actions.
[A button with the error/success state. Image source: Dribbble]
To create vibrating and shaking warning animations, you can use the CSShake library.
2) Hover animation
Animations with hover effects can be used for several purposes. For example, when users hover over an object they can find out whether it’s clickable. Buttons can light up, change form or color, or show hints.
[Animation with the hover effect. Image source: Dribbble]
Another goal of hover animations is to inform users that the actions they’ve performed have been successful. For instance, when users submit a form, an animation can show that the Submit button has been pressed.
When visiting your web app, many users will be interested in the story of your company’s growth and product development and will want to read case studies or other stories depending on the type of business.
There are multiple ways of telling these stories: you can write detailed articles and describe everything in text or you can create videos. However, you can go further and use animations to tell your stories in an unusual way.
Creative animated storytelling can convey a lot of information quickly and make your story absorbing. For example, instead of writing a long article about your new hotel construction, you can show users animations that demonstrate the building process. Below, you can see an example of what this kind of animated storytelling might look like:
[Example of animated storytelling. Image source: Dribbble]
Well-designed animations can brighten your users’ visits to your web app, show users what they should concentrate on, give them visual feedback, offer guidance, and even build a brand. This article should help you decide what types of animations to apply to your own web app or website.