title: framer-motion: How do you share different animations between parent and child components?
body: <p>I was making a navigationbar. <Br/>
  And I would like to add scale effect and underline effect when mouse is placed on the button.<Br/>
  I made a lower  component in the  component and added animation using framer-motion. <Br/>However, if i mouse over the underline, it works well, but i mouse over the item component, the underline animation effect does not work.<Br/>
  Attempt to resolve with LayoutGroup failed.
  plz help..</p>
  <pre class="lang-js prettyprint-override"><code>const itemBtnVariant = {
      normal: {},
      action: {
        scale: 1.2,
      },
      underAction: {
        opacity: 1,
        width: &quot;30px&quot;,
      },
    };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const Item = styled(motion.li)&lt;{ route: boolean }&gt;`
    position: relative;
    margin-right: 20px;
    display: flex;
    justify-content: center;
  
  `;
  const UnderBar = styled(motion.div)`
    position: absolute;
    background-color: white;
    width: 15px;
    height: 1px;
    bottom: -5px;
    left: 0;
    right: 0;
    margin: 0 auto;
  `;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;Link to={&quot;/&quot;}&gt;
              &lt;LayoutGroup&gt;
                &lt;Item
                  layout
                  variants={itemBtnVariant}
                  initial=&quot;normal&quot;
                  whileHover=&quot;action&quot;
                  layoutId=&quot;1&quot;
                  route={Boolean(homeRoute)}
                &gt;
                  Home
                  &lt;UnderBar
                    layout
                    variants={itemBtnVariant}
                    initial=&quot;normal&quot;
                    layoutId=&quot;1&quot;
                    whileHover=&quot;underAction&quot;
                  /&gt;
                &lt;/Item&gt;
              &lt;/LayoutGroup&gt;
            &lt;/Link&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/d3uC1.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d3uC1.gif" alt="enter image description here" /></a></p>