AnimatePresence | React exit animations | Motion for React
motion.dev · 1,288 words · saved by 1 readers
Add exit animations to React components when they're removed from the page.
AnimatePresence makes exit animations easy. By wrapping one or more motion components with AnimatePresence, we gain access to the exit animation prop. <AnimatePresence> {show && <motion.div key="modal" exit={{ opacity: 0 }} />} </AnimatePresence> Exit animationOpen example Video guideOpen video Usage Import import { AnimatePresence } from "motion/react" Exit animations AnimatePresence works by detecting when its direct children are removed from the React tree. This can be due to a component mounting/remounting: <AnimatePresence> {show && <Modal key="modal" />} </AnimatePresence>…
saved by
related reading
- On layout choreographykarlkoch.me
- arc() | Animate along a curved pathmotion.dev
- 10 Principles for Fluid UIkarlkoch.me
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- useAnimate | Manual React animation controls | Motion for Reactframer.com
- Inside Framer's Magic Motionnan.fyi
- Animated Elements | React Springreact-spring.dev
- animations.devanimations.dev
- The Power of Keys in Framer Motionnan.fyi
- You Might Not Need an Effect – Reactreact.dev
- Anime.js | JavaScript Animation Engineanimejs.com
- Transitions.dev — Essential transitions for web appstransitions.dev