Question: Using the new <Activity> component inside AnimatePresence (Framer Motion)

[alirezahematidev]

React version: 19.2.0

Steps To Reproduce Wrap a component in the new React component for conditional visibility: <Activity mode="visible"> <Component /> </Activity>

Try to animate this visibility change using Framer Motion’s : <AnimatePresence> <Activity mode={open ? "visible" : "hidden"}> <motion.div exit={{ opacity: 0 }}> <Component /> </motion.div> </Activity> </AnimatePresence>

Observe that AnimatePresence expects children to be conditionally rendered (e.g., {open && }) for enter/exit animations to trigger.

The current behavior When wrapping motion elements with , Framer Motion’s AnimatePresence does not detect mounting/unmounting changes — because toggles visibility internally (using display: none and subscription unmounting) instead of actually adding/removing children from the React tree. As a result, exit animations do not trigger.

The expected behavior Ideally, would expose some API or compatibility layer to integrate with animation libraries like Framer Motion that depend on conditional rendering for entry/exit transitions — or React could provide guidance on how to handle this scenario correctly.

[mattgperry]

Yeah I was thinking about this, I reckon it’d have to work differently like having a AnimateActivity that defers changes to an Activity component that it’s in control of

On Sat, 4 Oct 2025 at 09:25, Alireza Hemati @.***> wrote:

alirezahematidev created an issue (motiondivision/motion#3391) https://github.com/motiondivision/motion/issues/3391

React version: 19.2.0

Steps To Reproduce Wrap a component in the new React component for conditional visibility:

Try to animate this visibility change using Framer Motion’s : <Activity mode={open ? "visible" : "hidden"}> <motion.div exit={{ opacity: 0 }}> </motion.div>

Observe that AnimatePresence expects children to be conditionally rendered (e.g., {open && }) for enter/exit animations to trigger.

The current behavior When wrapping motion elements with , Framer Motion’s AnimatePresence does not detect mounting/unmounting changes — because toggles visibility internally (using display: none and subscription unmounting) instead of actually adding/removing children from the React tree. As a result, exit animations do not trigger.

The expected behavior Ideally, would expose some API or compatibility layer to integrate with animation libraries like Framer Motion that depend on conditional rendering for entry/exit transitions — or React could provide guidance on how to handle this scenario correctly.

— Reply to this email directly, view it on GitHub https://github.com/motiondivision/motion/issues/3391, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB34WKTQ6O3YZFMR5KJSSAT3V5Y7JAVCNFSM6AAAAACIIR6EYOVHI2DSMVQWIX3LMV43ASLTON2WKOZTGQ4DGMZUG44TQNQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>