Motion in UX Design: 6 Effective Types of Web Animation

In recent years, animation in user interfaces has been a hot debate among design and development communities. However, it is not under question for users of web products: these days, they seem to expect motion as part of the user experience design by default, which encourages designers and developers to work on more and more creative experiments. In this post, we will unveil 6 essential and effective types of web animation and illustrate them with plenty of creative motion design examples by tubik team to show how motion can support web interactions and usability.

The web designs shown below will feature the examples of:

hero animation
loading animation
accent animation
interactive animation
hover animation
motion for special effects

Enjoy and get inspired!

Different types of web animation are integrated into the home page of the ecotourism website.

Hero Animation

In web design, a hero image is a term applied to a prominent, eye-catching image usually seen in the above-the-fold zone of the webpage right below the website header. With enhancing technologies and innovative approaches, more and more designers make the hero images animated to make this initial touchpoint of the website communication with the visitor even more dynamic, lively, and impressive.

Talking about the benefits of the hero image approach in general and hero animation in particular, we’d mention the following ones:

Attention and impression. Hero image activates the power of visual perception from the first seconds, and animation makes it even stronger and more appealing. As there is not much time to impress the first-time visitor or draw attention to new offers, the hero image gives a chance to impress the users as fast as possible.

Information. Most people perceive and decode images much faster than words. It means that the hero image is not only the element of attraction – it’s also an informative part of the page, providing a quick visual message about the content. Motion can add more traits and make the message even more resounding.

Navigation. The correct composition of the hero image can strengthen navigation and bring more attention to the call-to-action button.

Emotional appeal. The emotional background of user experience plays a significant part and makes communication between the website and its visitor more human-like. Hero images especially livened up with motion, are a well-proven way to transfer the needed emotions via images, shapes, and colors, and set the needed atmosphere from the first seconds of interaction.

Aesthetic satisfaction. Although the offer and functionality of the website are always a priority, people also expect to get their eyes pleased. Aesthetics means much in terms of high competition on the web and rising desirability as a part of a positive user experience. A hero animation is one of the ways to activate aesthetics at once.

Prominent and impressive hero 3D animation on the home page of the uMake website gives a visitor an instant visual connection to what the service offers.

The home page for the Synthesized website instantly impresses visitors with an animated full-screen background with abstract patterns adding depth and dynamics to the visual experience and setting associations with the digital technologies.

The home page of the e-commerce website selling stationery uses trendy and elegant full-screen hero animation to set the theme.

The home page of the e-commerce website selling toys uses hero animation to add fun and playfulness to the interactions.

The landing page for the fintech service Uni features a hero animation of the 3D illustration setting the theme of an innovative approach to credit cards.

The website’s home page for Energizou, the electricity provider in Brazil, focused on the retail market, uses an atmospheric hero animation to set the theme and liven up the user experience.

Hero animations on the home page and 404 page of the website for ShipDaddy, shipping and fulfillment service, feature the animated company mascot that adds fun and helps to set solid brand communication.

The landing page for the Pass-On delivery service features the hero animation of the map setting quick association with deliveries around the country.

Loading Animation

One of the essential positive features of interface animation is that it enables communication with the user. Animated interface details can instantly inform about the processes and stages of progress, usually realized via loading animation of different kinds. Loading animation is one of the most widely-used types of UI animation in both web and mobile products: it lets the user instantly understand that the process is going on and sometimes even show what stage of the process is. The biggest advantage of this animated interaction is providing assurance for the users, making them calm and confident in the process of using the website. What’s more, designers usually strive to make it aesthetic and captivating to contribute to a positive user experience and keep it consistent with the general design concept and brand style.

The web page for the egg product e-commerce website uses the counter to show page loading progress.

The loading animation for the e-commerce website of a niche juice brand imitates filling up the juice bottle.

The web page of the website telling about art galleries and events around the world uses captivating and artistic loading animation that imitates painting on the screen.

These article pages for the website devoted to the zero-waste lifestyle use small and beautiful loading animations that echo the title illustration of the article.

This website concept presenting portfolios of designers and architects from different countries uses stylish and captivating page loading animation using the association with an animated grid of tiles.

Accent Animation

This kind of animation meets the objective of drawing visitors’ attention to specific details in the layout, for example, keywords or phrases, information blocks, directional cues, brand signs, or interactive elements such as buttons, menus, cards, etc. This kind of motion supports scannability and makes navigation more straightforward and intuitive while the interaction process gets more lively and dynamic.

This website page for fintech service Crezco uses accent animation to draw attention to the key phrase in the text block that informs visitors about one of the core benefits, free payments.

The website for hiring yachts uses accent color and animation to make the CTA elements instantly visible.

The ShipDaddy website uses accent animation to attract attention to the list of the benefits for service clients.

The book review website applies stylish and hypnotic accent animation of a text piece to add dynamics and draw attention to the special feature of an item.

The illusion space website uses different types of slight accent animation, attracting attention to the CTA button, an arrow used as a directional cue, and a tagline.

Interactive Animation

This type of animation adds interactivity to website communication with visitors amplifying their connection: motion of this kind makes it engaging and emotional, often adding fun and playfulness. What’s more, interactive animation can provide users with instant feedback on their actions; it can support the search or choice process by visualizing different options, enhancing the informativeness of the web product.

The interactive menu page of the niche food e-commerce website turns the image of the product packaging each time user hovers a particular category.

The shipping company’s website uses an interactive map page visualizing the destination countries in an engaging and informative way.

The interactive product page of the yacht-hiring website uses smooth animation of the 3D models of the yacht models helping visitors look at them from different points.

The interactive menu page of the booking website offers more options on the hover of the category, wrapped in trendy clickable shapes and smoothly animated.

The interactive home page of the educational web editorial Illuminating Radioactivity opens the field full of bright tags featuring popular characteristics of radioactivity and hiding the name of the project. Moving the mouse cursor, users remove the labels, as well as the website erases the common stereotypes about the theme of radioactivity.

Special Motion Effects

Another reason to integrate motion into the web page is emotional and aesthetic rather than logical. With the super tight competition for visitors’ attention around the Web with a daily and hourly growing number of websites, the ability to stand out, impress, quickly capture visitors’ eyes and engage them to learn more is an essential task for website creators. A thoughtful balance of utility and usability on the one hand with emotions and aesthetics on the other help make user-friendly websites that communicate with visitors via not only information and functions but also emotions, fun and beauty. And motion becomes one of the effective tools supporting that goal. It can mark out the beauty of colors and gradients, breathe life into the layout, make movements dynamic and lively, sharp or smooth, brutal or tender, as well as strengthen the power of UI elements with motion and original transitions.

The e-commerce egg product website uses the animated image of the brand mascot, funny chicken used on packaging and branded materials. This way, it not only adds fun but also supports growing brand recognizability through the memorable character integrated into the product identity and keeps the whole customer experience consistent.

This landing page concept for an innovative charging station, inspired by the 3D concept created by concept designer Rettz Schmettz, uses animation to make the product presentation both informative and impressive.

This cool and bright website for a Chinese restaurant uses nuance animations such as trendy shapes with images of the food and beverages inside and a funny symbolic Maneki-Neko statue welcoming the visitors.

The category website page for Annual Awwwards is interactive and adds a feeling of depth due to the effect following the cursor. The light-backgrounded circle in the center features the category’s title and attracts attention at once, taking advantage of color contrast and smooth accent motion.

The landing page for the niche brand of party drinks uses eye-catchy and dynamic scroll animation and background motion effects to add fun and mood to the interactions.

The Stop Plastic website uses trendy motion effects to make the user experience more engaging, aesthetic, and captivating.

The exhibition page of the Lumen Museum website features the organization and vertical animation of the photo collection that echoes the visual presentation of this interactive set in the exhibition hall of the museum.

The online editorial about insomnia issues uses special motion effects setting the feeling of dizziness and instability that can be typical symptoms of people suffering from this problem.

The illusion space website uses special motion effects, transforming parts of text content and supporting the needed atmosphere.

The website of the company organizing parties for children uses attractive and playful 3D animation for loading and then as an element of integrity for different sections of the web page scroll down.

The clothing brand website uses neat and elegant animation of the thread uniting all the page sections and supporting the feeling of integrity while the visitor scrolls down the page.

Hover Animation

This type of motion deals directly with web usability and is one of the basic types of web animation expected by default. It is used when a website visitor hovers (moves a cursor on a particular element but doesn’t click it) over a web layout element, and it responds with motion, letting the user know that it’s clickable. So, this web animation type is one of the ways to support easy navigation and quickly inform website visitors about the interactivity of the particular elements. What’s more, approached creatively, hover animations can also add their two cents to the general aesthetics of the website design.

The cleaning company website uses captivating abstract hero animation and uncommon hover animation for the tabs with categories of services.

The home page of the pet shop website uses a creative approach to hover that enlarges the image of the hovered item and even allows to interact with the card right on the spot.

The website of the spa center uses stylish accent animation and hover animation that makes interaction with the menu of services easy and informative.

The museum website concept uses hover animation to replace black-and-white photos with color ones, and this way, awe and engage visitors to interact with the website.

Cool and playful hover animation for product cards on the BlockStock website

So, based on the numerous examples above, it’s easy to see that there are diverse cases when well-crafted animation helps enhance web user experience and increase usability, desirability, and accessibility of web pages. Nevertheless, designers and developers should analyze both positive and negative impacts animation may have in any particular case to ensure that it will improve UX design instead of overloading the layout or distracting the website visitors. Devil is in the details, so make them work effectively for the sake of the users.