React Motion animation for Accordion Content

[swernerx]

I am trying to combine Framer Motion with this wonderful UI framework. Right now I am working on a main site navigation which is been built around the Accordion (type=multiple) component. It worked pretty much directly out of the box for the basics.

Instead of using CSS animation I do like to animate the list and the items using Framer Motion. I wrapped the whole Root with AnimatePresence as documented for Framer Motion.

export function Navigation({ children }: NavigationProps) {
  return (
    <AnimatePresence>
      <AccordionRoot className={rootClass} type="multiple">
        {children}
      </AccordionRoot>
    </AnimatePresence>
  )
}

My thinking process was to build on the asChild prop and render the Content and Item components using Framer Motion elements:

export function NavigationList({ children }: NavigationListProps) {
  return (
    <AccordionContent className={listClass} asChild forceMount>
      <motion.div animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
        {children}
      </motion.div>
    </AccordionContent>
  )
}

I played around with forceMount, but it still does not work. When forceMount is there, the whole content is rendered in any case. When it is missing the content is invisible. Without any animation.

I guess from what I understand from Framer Motion some kind of state information would be helpful:

export function NavigationList({ children }: NavigationListProps) {
  return (
    <AccordionContent className={listClass} asChild forceMount>
      {(closed) => closed ? null : <motion.div animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
        {children}
      </motion.div>}
    </AccordionContent>
  )
}

That would be the approach I imagine when using render props. Is there any alternative to this right now?

Thanks for any help!

[andy-hook]

I guess from what I understand from Framer Motion some kind of state information would be helpful

Yes, you'll need to derive the state manually to feed to framer, you can use the controlled props (value, onValueChange) to do so.

Something like this using AnimatePresence would work (though you can share and consume the accordion value via context or however else you prefer)

https://codesandbox.io/s/framer-motion-accordion-9nup9l?file=/src/App.js

[swernerx]

Thanks for pointing me to the right direction! It's still a little tricky... especially with cascaded AnimatePresence as height calculation is not very mature it seems. But this is not the fault of Radix I guess.