Lesson 3/5

Animation variants

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.

Unlock the full lesson with PRO

Want to read the full lesson? Join Frontend.FYI PRO.

PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!