At Yalantis, we’re huge fans of creative and beautiful animations. We believe that well-designed animations can contribute significantly to the appeal and user-friendliness of web and mobile apps. When applied properly, effective animations are capable of building a strong connection between users and the content on the screen.
If you’re looking to make your web app more user-friendly, keep reading this post: we’ll talk about the types of web animations and tell you how to get a web design boost for your own cross-browser web app.
Types of web app animations
To begin, let’s examine the types of UI web app animations and see what you can use them for.
Users often have to wait while things load: website pages, PDF files, tables, maps, videos, and other content. To brighten up the wait and create the sense that your app is running faster, use any of the countless types of loading animations that spin, jump, or disappear. You can also consider skeleton screens, short cartoons, progress bars, and shape-changing animations.
[Loading animation. Image source: Dribbble]
A user’s first impression is significant, and create fantastic greeting animations can help you engage users from the start. Moreover, they can entertain users and make them want to use your product again. Let’s examine the most common types of welcoming animations to understand how they captivate people.
These animations are one of the most eye-catching, and they may appear on a web app’s homepage. They help users relax, offering some light meditation. Particle animations can be interactive or non-interactive.
Interactive (or real-time) particle animations respond to the user’s cursor movements. Most users prefer being able to control animations, and a web app with this type of animations can be hypnotizing. Particle Love, a website by Edan Kwan, provides a perfect example of real-time animations.
Non-interactive particle animations don’t require 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 involve 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.
If you visit the Canvas United homepage, you’ll see a soundless background video that complements the central text. The video is quite fast, so users can see it multiple times, drawing them in and encourage them to spend more time on the site.
3D animations provide more opportunities for designers to create realistic and complex visuals that attract attention. Some design experts have 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 and entertain users in their first minutes of visiting a website.
[Mixing 2D objects with 3D objects in motion design. Image source: PixFlow]
When creating a new website or web application from scratch, you can apply the above animations to your home page. Also, if you already have a digital product and are thinking about a redesign, you can use animation that suits best to transform the interface of your product.
One of the main advantages of scrolling animations is that they complement interactive designs and give control to 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 the page.
[Animated scrolling with the parallax effect. Image source: Dribbble]
If you’d like users to see multiple images on the same screen, you can add a slideshow or a carousel demonstrating images one by one. By doing this, not only can you save your site’s space, you can also narrate a story. By ordering images, you can explain how your web app works, what your company values are, and how your company appeared. Or you can simply list your best products to attract attention. In addition, by setting the direction for image slideshows and carousels, you can make users see and encourage them to use other site elements.
[Property listing on a real estate website by Yalantis]
Sidebar navigation (vertical sliding navigation) is the most suitable option for creating compact and clear web apps. Small animated menu icons that are always within reach on the side of the screen allow users to easily access your web app’s menu without scrolling.
[Animated sidebar navigation. Image source: Dribbble]
Animations can help users instantly understand if they’ve performed the correct actions. These animations can be divided into warning animations and hover effect animations.
Your web app can tell users that they’re doing something wrong. For example, animations can ask users to repeat an action or not to click a button again if they’ve filled in a field incorrectly or missed something. 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]
Animations with hover effects can show users whether the objects they hover over are clickable. Buttons can light up, change form or color, or show hints.
[Animation with a hover effect. Image source: Dribbble]
Another goal of hover animations is to inform users that the actions they’ve performed were successful. For instance, when users submit a form, animation can show that the submit button has been pressed.
By using visual feedback animations, your product design becomes more intuitive. You can also apply such type of animation to your mobile product. Learn more on how to successfully use animation in your mobile application from one of our recent articles.
Creative animated storytelling can convey a lot of information quickly and make your story absorbing. For instance, instead of writing a lengthy article about your new hotel construction, you can create an animation that demonstrates 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]
Technologies for creating web animations
Now that you know the top types of animations, it’s time to learn how you can add them to your app. The usual workflow is the following:
A designer creates a concept and demonstrates it to a frontend developer.
The frontend developer checks the animation complexity and chooses the technology to implement it. Most often, the developer goes to CodePen to choose from thousands of ready-to-use solutions.
The frontend developer tests if the animation works properly for the basic use cases.
Let’s look at the most popular technologies for building awesome web animations.
CSS animations will help you transition between different states using a set of keyframes. With high-performance CSS animations, you don’t need external libraries. You can animate elements of your web page in the Document Object Model (DOM) by setting CSS properties on them. CSS animations are also good for responsive development, as you can modify your animations with media queries. Instead of making objects for keyframes and timing properties, you can just pass their values directly.
SVG stands for Scalable Vector Graphics. SVG animations look sharp, as vectors have no pixel limitations. No matter how you resize the page, SVGs maintain quality just like raster images.
SVG elements can be animated with CSS. But SVG also has its own syntax for animations, called SMIL. SMIL is more powerful than CSS for SVG animations, as with CSS you can’t animate some SVG properties like a path’s shape.
With canvas animations, you get great performance when animating a lot of visualizations. A canvas provides a visual space where you can make complex animations with high-performance rendering. Canvas animations are about working with pixels. And using pixels, you can create complex drawings and interactions that don't affect performance.
WebGL stands for the Web Graphics Library, which is mostly used for difficult effects and 3D objects. It’s also possible to use WebGL to create animations for virtual reality (VR). WebGL allows you to render graphics at 60 frames per second. For WebGL animations, you also use a canvas, but doing so is much more difficult and complex. Most creative visual effects are made with WebGL.
Web animation tools
Now let’s move on to tools for creating great animations for your web pages. Most of the UI animation tools we’ll discuss are external libraries you can use in your project.
- GreenSock (GSAP)
[Web animation concept. Find more on the Yalantis Dribbble account.]
ScrollMagic is a plugin you can use to manage scroll animations. It’s good for animating elements based on a user’s scroll position and for pinning elements at specific scroll positions. With ScrollMagic, you can also add a parallax effect to your web page. ScrollMagic works with multiple frameworks to build animations, though the recommended framework is GSAP.
The Mo.js library works great for animating the UI and UX of your web pages, as it supports custom motion graphics. Mo.js is modular, so you can use the custom-built library for your projects and avoid large file size overhead. With Mo.js, you can move DOM and SVG DOM elements, but you can also create special Mo.js objects with unique features.
Rendering After Effects animations for the web
Motion designers mostly use Adobe After Effects to create animations. Then developers use different front-end animation tools. But there’s a simpler way: using the Bodymovin extension for After Effects, you can export your animations in JSON format and use the Lottie library to add animations to your site.
Code-free website builders
If you need a simple web page and don’t want to code or use the technologies we’ve listed above, you can use tools for beginners — website builders. Yep, these can’t be called animation software, but website builders often allow you to animate objects on the site you construct. You can find plenty of website builders and choose any you like. These are just a few examples.
Readymag is a popular tool for creating web pages, and it can animate elements of those pages. In Readymag, you can select when you want an animation to start and apply basic effects such as move, rotate, scale, and opacity. If you need more complex animations, you can add steps so that one effect follows another. Readymag lets you create loading sequences, scroll animations, and click and hover animations.
Webflow also allows you to create multi-step animations without coding. You can tie motions to scroll progress and transform element sizes, styling, and positions. You can also add microinteractions on different elements so they move or change with a hover or click. If you don’t want to start from scratch, you can easily add prebuilt animations to your website.
Wix is another website builder that allows you to add animations to your site. You can use it to make signs and buttons interactive with animations such as fading, floating, sliding, flying, folding, and turning. Additionally, there’s an option to animate page transitions and make them cross-fade, fade out-in, and move vertically or horizontally when scrolling.
Animations can help you create professional websites, highlight website elements and make users stay on your site longer. There are many animation technologies, tools, and techniques you can use to add dynamic or smooth animations to your web app, so choose the right ones to make your web app unique and modern. But don’t get carried away with animations. Otherwise, you can end up with a slow and cumbersome website that scares users away instead of retaining them.