[Help] Usage with framer-motion

[kylemh]

I'd like to add animations to an AccordionItemPanel content as it is unexpanded, but it doesn't seem like <AnimatePresence> is able to intercept the unmounting.

Am I doing something wrong?

https://codesandbox.io/s/sharp-lichterman-io2mv?file=/src/App.tsx

[mikeebee]

@kylemh I tweaked your Codesandbox slightly to get it working. Just a little CSS hack to stop the display: none hiding the panel immediately. This may affect accessibility in that you might be able to focus on focusable items inside the hidden panels so investigate that if you need to.

https://codesandbox.io/s/youthful-fermi-vyy7u?file=/src/App.tsx

[kylemh]

Got it. Added a link into the content and I see that's focusable even when the accordion is collapsed. I can probably create a component for the inner AccordionItemPanel content which leverages usePresence to switch the content to display: 'none' upon animation completion; however, this wouldn't prevent somebody from navigating into that content during the animation.

That's for me to figure out. Thank you!

[mikeebee]

Ok cool! Post your update if you can, I wouldn't mind using it if it works well 😀

[kylemh]

Unfortunately, I couldn't think of a solution that is both accessible and allows for exit animations. I believe it's a shortcoming of the API.

Instead, I've opted to replace react-accessible-accordion with @radix-ui/react-accordion

[mikeebee]

@kylemh no worries, thanks for showing me the alternative you found, looks great!