State, Interpolation, and keyframes

State, Interpolation, and keyframes

The goal of this article is to explain 3 main concepts in animations. After I explain the basic hooks in my previous article, you must be able to create animations. However, that's not all because in this article we will advance and learn some more concepts that will level up your animations and let you take full control.

State

Up until now, the animations we created start when the component mounts, and that can be fine, but if it's not what you want, maybe you want a key to control when your animation start or a button, right? A simple solution for this is to toggle a state and use ternary. Well, I will explain a little more in the example.

Now, instead of transition on the mount, you transition on a button click. Notice that we don't use from and to keywords a simple ternary is enough. Your spring will be as simple as this :

  const spring = useSpring({
    opacity: startAnim ? 0 : 1
  });

Interpolation

Interpolation is so important tool in animation and you need to understand it well because you will use it a lot. So, what is interpolate anyway?

Interpolate is a function that takes either a function or an object and returns a range or chains which allows you to route one calculation into another or reuse them. You will get this definition better when we finish the two examples below.

In this first example, interpolate will take a function and return a string. There are 2 steps for that. First, we will destructure our values from the spring. NOTE! : we are using the state to decide the values of x and c as I explain before.

  const { x, c } = useSpring({
    x: startAnim ? 100 : 0,
    c: startAnim ? "red" : "black"
  });

Second, we will interpolate those values. The interpolate will take a callback function and return a string.

        style={{
          transform: x.interpolate((x) => `translate(${x}px)`),
          color: c.interpolate((c) => c)
        }}

Interpolation will make our animation values more reusable. Notice here, we can take the x values and use it in the color too or just return any complex callback function to get the animation we want to achieve.

Keyframes

We can't use keyframes in React Spring, however, interpolation can help us to mimic that and it's one of the most awesome features interpolation provides.

First, destructure your values from the spring. nothing new here, just like before.

  const { x, c } = useSpring({
    x: startAnim ? 1 : 0,
    c: startAnim ? 1 : 0
  });

The first function takes an object of two arrays: a range which is an array of values between 0 and 1, and the output. After that, we chain another interpolation that takes a function this time. It takes the values we get from the output of the first interpolation and reuse them to apply the scale effect.

transform: x
            .interpolate({
              range: [0, 0.25, 0.5, 0.75, 1],
              output: [1, 0, 0.5, 0.9, 0.7]
            })
            .interpolate((x) => `scale(${x})`),