React Library - Framer Motion

Framer Motion is one of the package of the React library. With this, we can easily create animation effects to render  or remove components smoother. Let's see how we can use this library.

Project Set Up

Creating a React Project

React

Display a List

Displaying a List

Adding a Delete Button

Add a button that removes an item from the list

Status Management

▶ UseState Hook

To manage the status of the list item, import the useState hook and initialize as shown below

const [list, setList] = useState(items)

▶ Function that Deletes an Item

Add a function to delete an item from the list

const handleDelete = (id) => {
  setList(
    list.filter(i => i.id !== id)
  )
}

<i onClick={() => handleDelete(i.id)}>❌</i>

Adding Styles

For visual effect, let's add styles

ul {
  padding: 0;  
}

li {
  height: 150px;  
  margin-bottom: 10px;
  background-color: lightseagreen;
  list-style: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  text-transform: capitalize;
  color: aliceblue;
  position: relative;
}

i {
  font-size: 1.3rem;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

Adding Animations

Installing Packages

In the console, use the command below to install the necessary package

npm i framer-motion

Import the library to the component

import {motion, AnimatePresence} from 'framer-motion'

Wrap the entire list with 'AnimatePresence' tag and each item with 'motion.div' tag (Use attributes to give desired effects)

In this writing, we have seen how we can use the framer-motion from React library to easily add animation effects.

---

References

AnimatePresence | Framer for Developers

AnimatePresence | Framer for Developers

Traversy Media - YouTube

Traversy Media