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/react
:
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.