AnimateActivity
AnimateActivity is an animated version of React's Activity component. It allows you to add exit animations when hiding elements.
Whereas AnimatePresence animates elements when they're added and removed from the tree, AnimateActivity uses the Activity component to show and hide the children with display: none, maintaining their internal state.
AnimateActivity is currently available in Motion+ Early Access. As an Early Access API, expect changes as we receive feedback.
Install
First, add the motion-plus package to your project using your private token. You need to be a Motion+ member to generate a private token.
Once installed, AnimateActivity can be imported via motion-plus/animate-activity:
Important: AnimateActivity requires motion@12.23.24 and react@19.2.0 or above.
Note: Once out of alpha, AnimateActivity will be imported from the main "motion" package.
Usage
AnimateActivity shares the same API as Activity. By switching the mode prop from "visible" to "hidden", its child element will be hidden with display: none after child exit animations have completed.
Sequencing
As with AnimatePresence, we can use variants to sequence exit animations through a tree.
Layout
By default, exiting children will maintain their default styles in the DOM. This means that if they're position: static or in some way affecting the layout of the elements around them, they continue to do so until the exit animation is complete.
We can change this by setting layoutMode to "pop". This will immediately pop the element out of its layout, allowing surrounding elements to reflow while it exits.

