Animation variants

Unlock this video and the rest of this course by joining Frontend.FYI PRO .

The past few lessons we have been using the initial, animate and exit props. Perhaps you noticed that there were a few moments where we repeated quite some styles. There’s a solution for that! It is called variants.

Defining the variants

In essence a variant is a JavaScript object containing all animation styles, like you would also use them on for example the animate prop.

1
const variants = {
2
  visible: {
3
    opacity: 1,
4
    x: 0,
5
  },
6
  hidden: {
7
    opacity: 0,
8
    x: 30,
9
  },
10
};

At the top level we now have two keys: visible and hidden. These are the names of the variants. You can name them whatever you want, but it’s best to use names that are descriptive of the state they represent. There is also no limit on how many variants you add.

In our case the states are called visible and hidden, but it could very well be open and closed or active and inactive.