Looking for a component equivalent to Framer Motion's AnimatePresence

[Ashvith10]

Here is the particular snippet that I am trying to rewrite in Chakra v3 from Chakra v2, and without Framer Motion:

https://github.com/craftzdog/craftzdog-homepage/blob/ada0276d9ff6242597521a8c96a77c7058c74e4f/components/theme-toggle-button.js#L9-L25

I've repurposed the generated code in components/ui/color-mode.tsx (generated by npx chakra snippet CLI), trying to use Presence component from Chakra:

export const ColorModeButton = React.forwardRef<
   HTMLButtonElement,
   ColorModeButtonProps
 >(function ColorModeButton(props, ref) {
   const { colorMode, toggleColorMode } = useColorMode()
   return (
     <ClientOnly fallback={
       <Skeleton
         display="inline-block"
         verticalAlign="center"
         boxSize="10"
       />
     }>
       <Presence
         present={true}
         key={colorMode}
         animation={{
           _open: 'slide-from-top 0.2s ease-out, fade-in 0.2s ease-out',
           _close: 'slide-to-bottom 0.2s ease-in, fade-out 0.2s ease-in',
         }}
       >
       <IconButton
         onClick={toggleColorMode}
         colorPalette={{ _light: 'purple', _dark: 'yellow' }}
         aria-label="Toggle color mode"
         size="md"
         ref={ref}
         {...props}
         css={{
           _icon: {
             width: "5",
             height: "5",
           },
         }}
       >
         <ColorModeIcon />
       </IconButton>
       </Presence>
     </ClientOnly>
   )
 })

The problem is that, since IconButton is wrapped inside ClientOnly, it loads the Skeleton component, then unmount and mounts the IconButton component, causing the animation to trigger. I want it such that the animation only trigger when I'm clicking the button. Is it possible to achieve what I am trying to go for?

Alternatively, can we make use of data-* attribute here? I feel like using a state for this simple toggle might probably not be a good idea. Maybe there's a way to have a ref pointing to ClientOnly that I can use to tell when the IconButton element was mounted?

[lMysticl]

Presence is the right primitive here, but it needs a changing present value.

In the current code, present={true} never changes. key={colorMode} instead destroys and recreates the entire Presence, so the render after ClientOnly and every color-mode change are all treated as initial mounts.

Keep the presence instances stable and let colorMode control them:

<ClientOnly fallback={<Skeleton boxSize="10" />}>
  <IconButton
    position="relative"
    onClick={toggleColorMode}
    aria-label="Toggle color mode"
    ref={ref}
    {...props}
  >
    <Presence
      as="span"
      present={colorMode === "light"}
      lazyMount
      unmountOnExit
      skipAnimationOnMount
      position="absolute"
      inset="0"
      display="inline-flex"
      alignItems="center"
      justifyContent="center"
      animationName={{
        _open: "slide-from-top, fade-in",
        _closed: "slide-to-bottom, fade-out",
      }}
      animationDuration="200ms"
    >
      <LuSun />
    </Presence>

    <Presence
      as="span"
      present={colorMode === "dark"}
      lazyMount
      unmountOnExit
      skipAnimationOnMount
      position="absolute"
      inset="0"
      display="inline-flex"
      alignItems="center"
      justifyContent="center"
      animationName={{
        _open: "slide-from-top, fade-in",
        _closed: "slide-to-bottom, fade-out",
      }}
      animationDuration="200ms"
    >
      <LuMoon />
    </Presence>
  </IconButton>
</ClientOnly>

skipAnimationOnMount suppresses the initial presence animation when ClientOnly first resolves. Later changes to present still run the open/closed animations. No additional ref or state is needed because colorMode is already the state driving the swap.

The important part is removing key={colorMode}; otherwise each click creates another initial mount instead of allowing Presence to perform a transition.

References: Chakra Presence contract and Ark UI's official skipAnimationOnMount example.