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
- Great Animationsemilkowal.ski
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- useAnimate | Manual React animation controls | Motion for Reactframer.com
- Details That Make Interfaces Feel Betterjakub.kr
- The Power of Keys in Framer Motionnan.fyi
- animations.devanimations.dev
- Grainradgrainrad.com
- Anime.js | JavaScript Animation Engineanimejs.com
- Not a Numbernan.fyi
- Menu - Annnimate Landmark Kitannnimate.com