Search code examples
reactjsframer-motion

ReactJS Framer-Motion scaling a div dynamically with AnimatePresence layout

I have a question regarding framer motion's AnimatePresence exit animations, and layout. I am rendering a list of components like this:

<div style={{ height: 'fit-content', backgroundColor: 'black' }}>
 <AnimatePresence mode={'wait'}>
  items.map((id) => {
   return (<motion.div
    key={-id}
    layout
    exit={{ opacity: 0 }}
    transition={{ layout: { type: 'spring' }}>

    <Item key={id}/>
   </motion.div>)
  })
 </AnimatePresence>
</div>

(the code is just an example of what's going on going on, it might not do anything and it might have errors)

Basically, the elements in the list collapse nicely when they are removed from the DOM. However, the outside div (which is fit-content) just snaps into place after the element is actually removed from the DOM. Ideally, I would like the outside div to interpolate its height to fit the new content (using framer motion or some funky ReactJS or CSS code).

Here's a demo: https://codesandbox.io/s/framer-motion-animatepresence-poplayout-mode-forked-jhmkqt?file=/src/App.tsx

if you need any clarification please ask. thank you for taking the time to read this!

Solution

  • Alright I managed to figure it out after a little more docs reading: https://www.framer.com/docs/layout-animations/. If you want a div to interpolate it's scale after a child re-renders, just add the word layout as a prop to the parent motion.div

    In the code above it would look something like this:

    <motion.div style={{ height: 'fit-content', backgroundColor: 'black' }} layout>