5 Tips for Creating Fantastic UI Animations

In today’s digital landscape, user interface animations have evolved from being merely decorative to playing a crucial role in enhancing user experiences. From subtle transitions to eye-catching effects, fantastic UI animations breathe life into user interfaces, enhancing usability, engagement, and overall user satisfaction.

Today, we have gathered 5 tips with some general rules to make it easier for beginners to start their designer journey, so look no further. Let us introduce you to the exciting world of UI animations!

Here is what we’ll cover in this blog post:

1. Setting Frames Per Second
2. Duration and Speed
3. Easing
4. Squash and Stretch
5. Making Animations Interactive

Let’s dive in!

1 – Ideal setting of Frames per seconds

Before beginning the process of creating our animations, we have to pick the frames per second of the animation. Frames per second (FPS for short) is the frequency at which images are being played within a second. For the motion to be realistic to our eyes, the minimum FPS of a video or an animation has to be 24, which is the industry standard for many styles of animations for this exact reason. Hand-drawn animations with a frame rate of 12 can be an exception.

In our case, technological advancements allow us to bump up the frame rate of user interface animations. High refresh rate devices can display 30, 60, 120, or even more FPS. Currently, it is best to use 60 frames per second, providing a smoother animation and better quality in digital products.

It is essential to mention that every setting has its unique look, and sometimes, it is better to pick a certain one for stylistic reasons rather than keep it at 60 all the time.  

2 – Setting duration and speed

According to Aela School, duration and speed in motion design are two factors that go hand in hand. Users need time to cognitively interpret and understand animations, which is why it is necessary to ensure that animations are neither too fast nor too slow, as either could distract the user.

Generally speaking, the optimal animation speed is between 200ms and 500ms. This is the time our brain needs to process what it is seeing. Animations below 200ms are too fast and not perceived by our eyes, while animation above 500ms can feel too slow and might end up boring the user.

This number can differ depending on screen sizes since there is less space for movement. The ideal speeds are the following:

• Mobile: around 200-300 ms
• Tablet: between 400-500 ms
• Web/desktop: This is where we have the most flexibility as animators. Old websites used to have instant transitions, allowing us to go as low as 150 ms and up to 300 ms.

Besides the speed of an animation, it is also essential to consider the size of the object moving. Smaller objects tend to move quicker and faster, while larger elements tend to move more slowly. Remember that all these are good practices, not rules set in stone.

3 – Easing for natural animations

Easing is a technique that tries to mimic real-world physics. It makes the animations feel alive and believable by giving them a natural and polished look. We can ensure that elements move smoothly and seamlessly using ease-in and ease-out effects. When an object eases in, it starts slowly and accelerates, while easing out starts fast and slows down as it stops.  

Take a look at the example above. The first object uses a linear interpolation, meaning no easing is applied. The animation here happens at the same speed from the beginning to the end. Generally speaking, it is best to refrain from using it, as it looks unfinished and weird. As human beings, our eyes are used to seeing movement in a certain way, and as animators, we want to replicate it as best as we can.

For this reason, the second object has a very simple cubic interpolation applied. This uses both ease-in and ease-out effects. The beginning of the animation starts slowly, happens fast in the middle with a significant acceleration, and finally slows down gradually towards the end.

We can think of it as three separate steps: buildup, explosion, and wind-down. Usually, animation software enables the user to change the way the interpolations work so we can finetune how exactly these parts look. Still, generally speaking, keeping these steps is a good rule of thumb. 

4 – Squash and Stretch for a Little Life

Another classic animation principle is the usage of squash and stretch, which can breathe more life into our animations. 

We can create a sense of playfulness and responsiveness by applying deformations to objects during transitions or interactions. For instance, buttons can squash slightly when pressed or expand when hovered upon, giving users visual feedback and a playful experience.  

This example uses the effect alongside easing, following the same buildup, explosion, and wind-down formula. During the buildup, the objects squash, lessening in width and gaining height. This is an anticipation for the movement that follows. The reverse effect happens during the explosion: the object becomes wider while its height shrinks. The wind-down part concludes the movement by repeating the first step, becoming narrower and taller again.

We do have to be mindful of maintaining balance and not overdoing the effect to avoid distraction or confusion.

5 – Interactivity matters a lot

Creating animations that respond to user actions, such as clicks, swipes, or scrolling, is the backbone of UI animations. Making them interactive transforms a tedious task into something more joyful. It adds depth and engagement, allowing users to feel a sense of control and agency while looking cool. 

For example, a button can have multiple states depending on what the user does with it. A standard or default state would indicate when nothing happens to it. A hover state could be the moment the user’s mouse enters the area of the button. Finally, an animation can be fired for extra effect when the user clicks the button.

One software you can do this with is Rive. Rive is a powerful tool that lets us design from scratch, animate our designs, and add interaction and responsiveness with state machines. Using it as a designer also adds value to the development of a product. Developers can simply use the files generated by Rive as they are without the need to code a single line by them.  

Conclusion

User interface animations have the power to transform mundane interactions into engaging and delightful experiences. Remember to balance aesthetics with usability, ensuring that animations contribute to the overall user experience rather than overshadowing it.  

If you are interested in more details, be sure to check out how the 12 principles of Walt Disney still apply today in terms of creating animations.  

Want to learn more?

Looking to further increase your UX skills and knowledge? Look no further! Our blog offers valuable insights and tips on UX design, research, and strategy that will help you take your skills to the next level. 

Whether you’re a seasoned UX professional or just starting out, our blog has something for everyone. So why wait? Check out our blog today and start learning!