Install Framer Motion and Create a Motion Component

Control Animations with Framer Motion's Animate Prop

Animate through Multiple States with Framer Motion Keyframes

Use Framer Motion initial Prop to Define the Beginning State of Animations

Customize Animations with the Transition Prop using Framer Motion

Clean Up Your Components with Framer Motion Variants

Animate Elements Removed from the DOM with Framer Motion Animate Presence 

Animate Elements When Their Layout Changes with Framer Motion layoutId

Create Dynamic Animation Values with Framer Motion for Different Elements with Custom

Create Micro Interactions with Framer Motion Gesture Props

Animate SVG Paths with Framer Motion

Drag and Animate List Reorders with Reorder Components

Animate React Apps with Framer Motion

`AnimatePresence` allows components to animate when they're removed from the React tree. Once the elements are wrapped in `AnimatePresence` you get access to the exit prop which animate the element when it is removed.

https://app.egghead.io/api/v1/lessons/react-animate-elements-removed-from-the-dom-with-framer-motion-animate-presence/subtitles

Instructor: [0:01] As you can see, if we add a new list item, it animates onto the screen, but when we remove it, it doesn't animate out. That's not a good experience for our users. We want the experience to be consistent on how items are removing and adding to the DOM.

[0:22] In order for us to do this in Framer Motion, we can use the AnimatePresence component. To use AnimatePresence, we would import AnimatePresence from Framer Motion.

[0:36] After AnimatePresence is imported, we're going to wrap it around the item that we want to animate out of the DOM. I will wrap it around the items that we want to map over in our list. Make sure you add that closing tag. Also, when using AnimatePresence, you want to make sure that you have a key prop on what you're animating. For this, I set the key to item.id.

[1:11] Now that we have our elements wrapped in the AnimatePresence component, we get access to a special prop called exit. Exit is what allows the element to actually be removed from the DOM and allow it to be animated. We're going to set it to hidden, which is our variant label. We'll save that.

[1:35] Now, when the item is removed from the DOM, it will go back to the hidden state, which will be invisible. As we save that, let's remove it. As you see, now, it fades out. Let's test it again. Test, then remove.

[1:53] To recap, we've imported AnimatePresence from Framer Motion. We wrapped items in the AnimatePresence component. We made sure that we had our key prop, and then we added the exit prop and set it to hidden. Now, our list item will animate when it leaves the DOM.

Animate Elements Removed from the DOM with Framer Motion Animate Presence

Share this video with your friends

Course

Animate React Apps with Framer Motion