Adding some simple animations using Framer Motion [Optional]

In this part we will learn how to use Framer Motion library in React to add some simple animation. Framer Motion is really powerful library and it can do really advanced animations. Check it our here https://github.com/framer/motion.

First we need to add framer motion library to our project by executing the following command in the Terminal

npm install framer-motion

In this example, we will animate our ListItem to slide in from the top when it is added and to fade out when it is removed. We first need to update ListItem.tsx

Read a lot more content with a free account.

Get access to our content and help us create even more great content by supporting us! 📝💯

Login here