7 Practical animation tips

A mistake I made early in my career was thinking that design, and in particular animations, are an art that you ‘get’ or not.

Everything felt beautiful like magic, and that magic felt completely out of reach.

Although it certainly requires good intuition, there are a lot of tricks that you can use to make your animations feel better without learning “magic”.

Here are seven simple ideas that you can use to improve your animations today.

1. Scale your buttons

The interface should feel as if he is listening to the user. You must strive to give the user feedback about all their actions as quickly as possible. Submitting a form must display a charging status, copy to clipboard action must display a success status.

A simple way to allow your interface to respond more immediately is to add a subtle scale to adding a subtle scale when a button is pressed. A bowl of 0.97 on the :active Pseudo-class should do the work:

2. Don’t out of scale (0)

Elements that animate from scale(0) Can make an animation feel. Instead, try to animate a higher initial scale (0.9+). It feels the movement softer, more natural and more elegant.

scale(0) Feels wrong because it looks like the element comes from nowhere. A higher initial value is more like the real world. Just like a balloon, even when it is empty, it has a visible form, it never disappears completely.

3. Do not postpone the following tool tips

Toolt tips must have a delay before they resemble the prevention of accidental activation. As soon as a tool tip is open, floating over other tool tips should open them without delay and no animation. This feels faster without beating the goal of the first delay.

Radix and Basic user interface, two non -disposed component libraries, skip the delay once a tool tip is displayed. You can also skip the animation with Basic. To do that, you must focus on it data-instant And set the transition time to 0ms.

This is what the styles would look like to achieve this:

.tooltip {
  transition:
    transform 0.125s ease-out,
    opacity 0.125s ease-out;
  transform-origin: var(--transform-origin);
 
  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.97);
  }
 
  /** This takes care of disabling subsequent animations */
  &[data-instant] {
    transition-duration: 0ms;
  }
}

4. Choose the correct relaxation

Easing, which describes the speed that changes something during a certain period, is the most important part of every animation.

It can make a bad animation look great and a great animation looks bad.

If you animate something that comes in or leaves the screen ease-out. In the beginning, it accelerates that the user gives a sense of responsiveness.

The drop -down list on the left used below ease-inWhich starts slowly. On the right ease-outWhich starts quickly, so that the animation also feels faster.

The duration for these choice of drop -downs is identical, 300ms (You can inspect the code to verify this), but the ease-in People feel slower. That is the difference that makes relaxation.

You could lower the duration ease-in Work, but this relaxation is simply not made for onion animations. It accelerates on the endThat is the opposite of what we want.

Here is a visual representation of both curves, is blue ease-out. Note how much faster it moves in the beginning, that’s what we want for our animations.

Most of the animations that you have seen so far also use adapted release curves to make them feel better.

The built -in relaxing curves in CSS are usually not strong enough, so I almost never use them. View the example below where we compare two versions of the ease-in-out curve:

You can still apply the relaxation principles, just use a habit ease-out For more impact. There are numerous sites that offer adapted variations of all easeings, here is one that I recommend: Easings.co.

5. Normally make your animations consciously

One way to make your popovers feel better is to make them aware of them. They have to pick up the trigger. You need CSSs transform-origin The default value is the default value for this centerWhich is wrong in most cases.

Click on the feedback button below to open the Popover and see it Animate from the middle, close it and close it and press J Tap the gray X icon To set the right origin and to reopen the Popover.
Urgently S Will slow the animation so that you can see the difference better.

You can also click on the buttons of the dotted lines to move the part to a different position. The difference is most noticeable when both the horizontal and the vertical origin does not match, such as the top right.

Basic onion and Radix onion support origin-conscious animations via CSS variables. This means that applying these variables automatically sets the correct origin.

.radix {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
 
.baseui {
  transform-origin: var(--transform-origin);
}

You may think that the difference is subtle, maybe you don’t even notice it. To be honest, or you or your users notice that it doesn’t matter that much. Unseen details are visible in the aggregated, they are composed.

‘

Combining all those unseen details to produce something that is simply amazing, such as a thousand barely audible voices that are all singing.

“

6. Keep your animations quickly

A faster spinning spinner ensures that the app seems to be loading faster, although the loading time is the same. This improves the observed performance.

A 180ms Selectiant animation feels more prespress than one 400ms An:

As a rule of thumb, onion animations must generally remain under 300ms.

Remove animations or float interactions completely when they are seen tens, perhaps even hundreds of times a day. Instead of delighting your users, they quickly become annoying and let your interface feel slower.

I go in more detail on this subject in the message “You not need animations”.

7. Use blading if nothing else works

If you have tried a few different versions and duration for your animation and feel something else, try to add a little filter: blur() To mask those imperfections.

Below we have a button that is simply between two states, and another that adds 2px of blur for that animation. It also uses tip #1 to scale the button down 0.97 When pressed. Note how much more pleasant the second button feels.

Blur works here because it bridges the visual gap between the old and new states. Without this you see two different objects that feel less natural.

It cheats the eye to see a smooth transition by mixing the two states together.

Note how much more the two states are without blur:

Keep learning

These tips will increase your animations, but this article only scratches the surface of how an interface can be improved by movement.

In animations.dev We go much deeper into the theory and practice of great animations. There are videos and interactive components that help you understand the theory and exercises for you to practice building animations that feel good.

This year’s last registration opens in less than a week before 10 days. You can register for the waiting list with the link below to get one Free Preview course To see if it suits you well:

View Animations.dev