{"id":7359,"date":"2021-08-03T17:38:11","date_gmt":"2021-08-03T14:38:11","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=7359"},"modified":"2022-04-13T18:23:38","modified_gmt":"2022-04-13T15:23:38","slug":"spicing-up-the-ui-a-guide-for-approaching-css-animations","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/spicing-up-the-ui-a-guide-for-approaching-css-animations\/","title":{"rendered":"Spicing Up the UI: a Guide for Approaching CSS Animations"},"content":{"rendered":"

I guess every front-end developer had that moment in their career when work on a website was already at the finish line, but the website looked like it lacked some life. Users weren’t able to interact with the design, and the only plan for making it more dynamic was to turn the cursor into a pointer via cursor: pointer<\/em> to indicate links and buttons.<\/p>

Today, a high-quality user interface is not complete if it lacks interactivity and smooth motion – especially with the number of instruments available to web developers<\/a>.<\/p>

Here, we’ll discuss different approaches to creating animations on the web and spicing up the UI.<\/p>

Basic principles of animation<\/h2>

First, let’s cover why animations are so important.<\/p>

Every day we interact with objects and observe objects’ reactions to those interactions. If you throw a ball from some height, its speed will be continuously increasing right until it hits the ground. After that, it will bounce a few times, and every jump will be shorter than the previous one, right until the ball finally stops.<\/p>

These are the laws of physics. We are used to observing objects’ responses, and having objects provide us with some sort of response is an approach common for modern design. E.g., you can hear a shutter sound on your mobile phone when you take a new photo. It’s designed this way because users like products that work similarly to what they’re used to. Users like it when it’s predictable how a product reacts.<\/p>

Let’s go through four main principles of animation:<\/p>

Suitability<\/strong>. Animations must suit the context of the website. Animations must work either as responses to users’ actions or as a silent background that doesn’t draw too much attention. The website should never “scream” with animations.<\/p>

Stability<\/strong>. Animations must compliment the UI, not break it. No content should be jumping or falling apart when the animation starts.<\/p>

Unity<\/strong>. Pay attention to the timing and smoothness of animations. Timing of the animations of basic UI elements must be synchronized (buttons, links, etc.). It’s common sense to separate timing<\/em> parameters and easing <\/em>in stand-alone variables.<\/p>

Usability<\/strong>. It’s not enough for elements to only move smoothly. Usability also matters. An animation too long will most probably interrupt the user experience rather than make it more pleasant. \"Professional <\/a><\/p>

Just think of animations as of a drummer in a band: nobody pays attention to a drummer until they fail.<\/p>

CSS-animations<\/h2>

The easiest way to make the website feel more cheery is to use transition<\/a> or animation<\/a> properties in CSS. Transition<\/strong> is used for making the animation smooth, but it’s not a function that makes an object animated. The animation starts when the property changes. E.g., you can write transition: color 0.3s<\/em> and change color<\/em> on : hover<\/em>.<\/p>

On the contrary to transition<\/strong>, the animation <\/strong>function launches the animation immediately. Most of the time, I use transition<\/strong> since animations should respond to users’ actions. Animation <\/strong>function can be used to animate the background.<\/p>

Without animations, the UI isn’t attractive. You may have an excellent website, but when it feels “cold” and doesn’t respond to the user’s actions, it feels unfinished or broken. For example, the menu below begs for transition<\/strong>:<\/p>

\"\"<\/figure>

What if you add a bit of smoothness?<\/p>

\"\"<\/figure>

Keep in mind that we didn’t change how the menu acts when we hover over a link or move between lists. We only added a transition <\/strong>to some actions. It looks much better now, right?<\/p>

Still, something is still missing. When you move between lists, all elements are animated in the same way, which doesn’t serve a native experience. Just remember what happens when the train starts moving or when cars start driving on the green light – they all start their motion with an inevitable delay.<\/p>

Let’s apply this principle to animation. Consider the element a user clicks on to be “leading”, and others “to follow”. Technically, we’re adding +1 to the sibling elements’ index (i) <\/strong>and apply transition-delay <\/strong>to each element i * 0.1s<\/strong>. The further the element is from the “leading” element, the more significant the animation delay.<\/p>

Such an approach has the name of a stagger animation effect. You can check a good article<\/a> about it.
<\/p>

<\/p>

You can find more animation samples on the website called Hotel spider<\/a>.<\/p>

In CSS, you can set transition-delay<\/strong> depending on the element’s position on the list:<\/p>

.selector:nth-child(1) { transition-delay: 0.1s;}.selector:nth-child(2) { transition-delay: 0.2s;}.selector:nth-child(3) { transition-delay: 0.3s;}<\/code><\/pre>
With preprocessors, you can use loops to generate required styles:<\/p>
@for $i from 1 through 10 { &:nth-child(#{$i}) { transition-delay: #{$i\/10}s; }}<\/code><\/pre>
Speed of the website<\/h2>
When we speak of the website performance, the first thing that comes to mind is the page loading speed, and points websites receive at Google’s PageSpeed Insights<\/a>. However, besides those numbers, you should also think of user experience.<\/p>
When there is a freeze, e.g., when a user sends data from the contact form to the server or switches between pages, you could show them an animation. It would distract their attention, so a user doesn’t notice that loading takes too much time.<\/p>
\"\"<\/figure>
If you are writing in plain HTML (no React<\/a> or Angular<\/a>), I recommend using the barba.js<\/a> library for organizing smooth transitions between pages. It allows creating navigation similar to one in Single Page Applications.<\/p>
FPS: How it works<\/h2>
Any animation is the transition of an object from one state to another.<\/p>
To change from 0 to 1 in a specific time t<\/em>, we split the process into iterations, and 0 changes in certain intervals until it becomes 1. Animating from 0 to 1 is the basics for building anything.<\/p>
<\/p>
If you learn to animate from 0 to 1, you’ll be able to calculate the position of any element using the interpolation formula.<\/p>
<\/p>
This is the formula of linear interpolation. In our case, when an x <\/strong>changes from 0 to 1, y <\/strong>will change linearly from a<\/strong> to b<\/strong>.<\/p>
60 FPS<\/h2>
In a browser, animation speed is calculated according to 60 FPS (frames per second). Why 60 but not 30 or 24?<\/p>
24 FPS <\/strong>is the TV standard. In general, our brain needs only 10-12 FPS to start treating separate frames as an animation. When the cinema was born, silent movies were shot with time frames from 12 to 40 FPS. Back then, it was easy to manage the scenes’ swiftness by increasing or decreasing the FPS.<\/p>
The 24 FPS standard appears when movies get sound and you have to sync video and audio. While the \u00b15% is hard to notice when it comes to video, such a difference is critical when we speak about sound. 24 became a standard<\/a> because it is the smallest number that can be divided by 2, 3, 4, 6, and 8 at the same time.<\/p>
This has significantly simplified the video editing process. When a video plays at a speed of 24 FPS, you may notice that complicated and fast scenes blur. Such an effect is called motion blur. <\/strong>The only way to get rid of it is to increase the frame rate.<\/p>
30 FPS <\/strong>is used in the game industry to create complicated scenes and without the blur effect. Additional six frames allowed to solve the blur issue, plus didn’t overload the hardware, and the number 30 was selected randomly. In the USA, the AC frequency is 60 Hz<\/a>, and most TV screens and monitors can update the picture 60 times per second. Basically, if you draw every second frame, you get 30 FPS. Even in modern games, you choose between 60 FPS but a worse picture and 30 FPS but better quality.<\/p>
60 FPS <\/strong>provides a very high-quality motion effect and helps to avoid blur. Today, it’s standard for animations.<\/p>
There are higher rates, like 120 FPS, but they are made for specific cases and require particular hardware (at least a monitor supporting such FPS). Mostly it’s professional gamers who demand high FPS – they can feel the difference as they’re playing very dynamic games. For an average user, 60 FPS is more than enough.<\/p>
You can read more about the frame rate here<\/a>. You can compare pictures with different frame rates here<\/a>.<\/p>
In animation for browsers, we use 60 FPS. So one frame takes about 16 ms. You have to agree, that’s not much. That is why it’s important not to overdo your animations. When the browser doesn’t have enough time to calculate 16 ms, the next frame gets skipped, not delayed. The browser will decrease the frame rate, which will affect the quality of the picture.<\/p>
FPS. Debugging<\/h2>
You can check the current frame rate in Google Chrome using Chrome DevTools. <\/p>
One way is to open DevTools and launch the Command Menu (Windows: Ctrl + Shift + P; Mac: Cmd + Shift + P). Then type FPS<\/em> into the search and select Show frames per second (FPS) meter<\/em>.<\/p>
<\/p>
To hide the FPS meter, press Hide frames per second (FPS) meter<\/em>.<\/p>
\"\"<\/figure>
Another way is to open the Rendering tab and select Frame Rendering Stats<\/em>:<\/p>
\"\"<\/figure>
In the previous version of Google Chrome, the FPS meter was showing the current real frame rate.<\/p>
<\/p>
After the update, you can find more detailed stats<\/a>:<\/p>
<\/p>
The percentage of frames rendered on time (16 ms per frame) informs how well the website performs – the higher the number, the better. <\/p>
In my work, I use the FPS extension<\/a> built by Yuri Artyukh every day. It allows you to check if the website functions fast enough. I only use Chrome’s functionality when I find a problem, and I need to debug and see where exactly FPS drops.<\/p>
<\/p>
You can find out how CSS animations perform in the animations<\/em> folder. Here you’ll find timings, delays, and easing curves. You can edit all of that and relaunch animations with corrected values to select the best version.<\/p>
<\/p>
Regarding rendering in browser<\/h2>
If you read the documentation on transition<\/strong>, you’ll see that you can animate all countable properties. So you can animate via opacity<\/strong> from 0 to 1, but you can’t do display: none<\/strong> to display: block<\/strong>. It’s technically impossible to split transition values into frames in display<\/strong>.<\/p>
By the way, if you need to hide an element and make it unclickable, do visibility: hidden <\/strong>and delay the animation. You can find a detailed description of the trick in this article<\/a>. I’ll be pleased if this helps you to fix an issue with the modal window or burger menu opening\/closing.<\/p>
Let’s get back to numbers. In CSS, there are plenty of countable properties. When animated, some move smoothly while others “jump”.<\/p>
<\/p>
To understand what properties can be animated almost without any additional resources, let’s try to understand how rendering in a browser works, and what exactly happens when we change styles.<\/p>