Build Complex Exit Animations with React & Framer Motion

Tom Is Loading β€’ July 19, 2024
Video Thumbnail
Tom Is Loading Logo

Tom Is Loading

View Channel

About

Hey, I'm Tom, I write code and talk about it. I primarily talk about HTML/CSS/JavaScript, React, Node, interviewing, Algorithms & Data Structures, and other stuff like that. I try to teach in a way that doesn't make you want to smack your face against your keyboard πŸ™‚

Video Description

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: https://www.tiktok.com/@tomisloading Instagram: https://www.instagram.com/tomisloading/ GitHub: https://github.com/TomIsLoading Twitter: https://twitter.com/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

You May Also Like