Build Complex Exit Animations with React & Framer Motion
Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
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
Code: https://www.hover.dev/components/other
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: https://linktr.ee/tomisloading
Portfolio templates: https://tomisloading.gumroad.com/
Website: https://www.hover.dev
Timeline:
0:00 - Introduction
0:17 - Project overview
2:13 - Basic exit animations with AnimatePresence
5:48 - Complex exit animations with usePresence and useAnimate