React Native and the easy way to get easing 📈 right

Photo by Mitchell Luo on Unsplash

Easing is one of the main ingredients in creating great animations. It transforms animations from lifeless to lively, dull to dynamic, and tedious to thrilling. Easing controls the naturalness of an animation in code. With the right easing, motion appears more fluid, providing a more pleasant experience for the viewer. Achieving the correct easing often requires only a single line of code.

In this brief tutorial, I will use an example from one of my previous articles, “Draggable React Native Notification Card ⏲️ in 30 Mins.” This demo features a draggable notification card that enters the screen with an entry animation from below the fold. In the original article, the card’s animation has no specific easing set. While the animation looks good, it is not perfect.

Here’s what the animation looks like in the article:

The entry animation in the article Draggable React Native Notification Card ⏲️ in 30 Mins

How to get easing right

First of all, how do we get easing right? To answer that question, I almost always turn to the Material UI guidelines. This comprehensive resource thoroughly outlines how to handle various scenarios. It provides detailed advice on choosing the appropriate easing and duration for animations in most common situations. All this valuable information is brilliantly compiled in this webpage/guide. Additionally, you can find a summarized version of the specifications on this page.

The key takeaway is this: In the physical world, objects don’t start or stop instantaneously. Instead, they take time to speed up and slow down. Transitions without easing look stiff and mechanical, while a transition with easing appears more natural.

In the example

To illustrate the impact of easing, I have created a video demonstrating different easing functions applied to the same animation. This video highlights the contrast between using the Material UI’s emphasized easing and linear easing. While the example is somewhat exaggerated, the purpose is to show how much easing can change an animation’s feel. Notice how different the animation feels with just a change in the easing function.

Video of the difference between linear easing and emphasized easing

As you can clearly see, the emphasized easing makes the card animation much snappier, while the linear version feels more unnatural. Below is the code for configuring the easing for the different versions (in/out animations) based on the Material UI documentation. For the React Native version, I simply converted the CSS values outlined on the MUI specs page. Using Bezier curves works the same way in any coding environment; it basically always means passing four values through a Bezier transform function.

const modeMapIn = {
  emphasized: Easing.bezier(0.3, 0.0, 0.8, 0.15),
  normal: Easing.bezier(0.3, 0, 1, 1),
  linear: Easing.linear,
};

const modeMapOut = {
  emphasized: Easing.bezier(0.05, 0.7, 0.1, 1.0),
  normal: Easing.bezier(0, 0, 0, 1),
  linear: Easing.linear,
};

And the duration for the in and out animations respectively as suggested by the MUI guidelines together with the code to start the animations.

const outAnimation = () => {
  // ...
  Animated.timing(pan, {
    // ...
    duration: 300,
    easing: animMode ? modeMapIn[animMode] : undefined,
    // ...
  }).start(onOut);
};

const inAnimation = () => {
  // ...
  Animated.timing(pan, {
    // ...
    duration: 500,
    easing: mode ? modeMapOut[mode] : undefined,
    // ...
  }).start();
};

That’s a wrap

As you can see, easing makes a big difference. Be sure to use it with your animations. The best of luck!

You can find the code here, would you like try for yourself.

TLDR;

• Use the Material UI guidelines to get easing right
• Use the MUI emphasized easing in most of your animations