title: Apply styles only during animation in framer-motion
body: <p>I have a collapsible panels animated with framer motion. When the panel switches from collapsed to open the overflow is visible. This breaks the layout somewhat as the content of the panel body then overlays the content below. However, I need the overflow to properly display a dropdown list inside the panels.</p>
  <p><a href="https://i.stack.imgur.com/UwL4P.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UwL4P.gif" alt="enter image description here" /></a></p>
  <p>I came up with the following idea.</p>
  <p>Basically I want to apply &quot;overflow:hidden&quot; to the StyledPanelBody when the framer animation is being executed. This would prevent the ugly effect with the overlay. However, I couldn't find any way to do that from the documentation. There is just a &quot;transitionEnd&quot; property.</p>
  <pre><code>const PanelBody = ({children, isFramed, isOpen}) =&gt; {
    const currentVariant = isOpen ? 'open' : 'closed'
  
    const loadFeatures = () =&gt;
      import('./framerMotionFeatures.js').then(res =&gt; res.default)
  
    return (
      &lt;LazyMotion features={loadFeatures}&gt;
      &lt;StyledPanelBody
        initial={currentVariant}
        animate={currentVariant}
        variants={{
          closed: {height: 0},
          open: {height: 'auto'}
        }}
        transition={{ease: 'easeInOut', duration: 0.3}}
        isFramed={isFramed}
        isOpen={isOpen}
      &gt;
        &lt;div&gt;
          {children}
        &lt;/div&gt;
      &lt;/StyledPanelBody&gt;
      &lt;/LazyMotion&gt;
    )
  }
  </code></pre>