Build Complex Exit Animations with React & Framer Motion

When a user deletes something, or closes a menu, or anything else along those lines, it can be a bit jarring if that thing just… disappears

To fix this, we can instead animate elements off of the screen before they're removed from the DOM, confirming to our users that their action was successful

Today we'll learn 2 ways to achieve this using React and Framer Motion!

📚 Project Links

🔗 My Links

Timeline:
0:00 - Introduction
0:17 - Project overview
2:13 - Basic exit animations with AnimatePresence
5:48 - Complex exit animations with usePresence and useAnimate

[camilohuerta]

very nice content! I'm learning a lot on how to use framer motion ;)

[xAndy]

Your presentation style is inspiring and I love the content as well. Thanks, Tom.

[paulreynolds]

Once again a great example & explanation 👏 😊

[qjrrrmi]

Great, great, excellent tip for me!!!
I am so inspired. Thank you.
Those classic jQuery animations were always a missing part for me while I'm working with react.
Thank you very much.

[moodyhamoudi]

Am I the only person that has issues with AnimatePresence leaving "ghost" components in the DOM? The transition will take place and then the element just stays in the document flow - it's very obvious when it's in an iterated list. Tends to happen a lot on mobile I've noticed

[cxudffu]

Its so cool, what veresion of framer motion are you using, I am facing a flicker on exit animation

[r-i-ch]

Great stuff!!!
A quick 2c is (and admittedly, I don’t much care for Tailwind), for some of the basic apparition stuff I wonder why not to use some CSS classes that can be toggled on and off to go forward and backwards? A downside would be the separation of concerns with mixing animation between css and framer, I guess. Also you need framer to update the other Todo in the list. Still, it seems like so much code inside of one <Todo> component that already takes 6 props and then we add some more internal state. Purely a gut feeling since this is awesome and obviously works!

Super challenge could be adding an Undo capability to put things back here they were and re-expanding the list.

Would it work if we broke the animate function defined in the useEffect out into its own?

Thanks for the video!

[pasival]

Hi Tom, I love your videos, they are very helpful, I've been having issues with lazyload with react routes, I've used framer motion to animate some divs in my webpage but the animation plays out before I get there. I have searching YouTube for days for a video that react routes and lazyload was used.

[IntrovertedCoder]

Hey Tom! I'm really looking forward for a framer motion course (paid) from you. Is it on your bucket list?