title: Animate background using Framer Motion
body: <p>I'm trying to create a React component where when scrolling down into it, its background transitions from a color to an image.</p>
  <p>This is the component:</p>
  <pre><code>const TeamSection = () =&gt; {
      return (
          &lt;Background&gt;
              &lt;TeamSectionContainer
                  initial={{
                      opacity: 0,
                  }}
                  whileInView={{
                      opacity: 1,
                  }}
                  transition={{
                      ease: &quot;easeOut&quot;,
                      duration: 2,
                  }}
              &gt;
                  &lt;Title&gt;Text&lt;/Title&gt;
                  &lt;Team&gt;Text&lt;Team&gt;
              &lt;/TeamSectionContainer&gt;
          &lt;/Background&gt;
      );
  };
  </code></pre>
  <p>And the styles:</p>
  <pre><code>const TeamSectionContainer = styled(motion.div)`
      ${tw`
          bg-no-repeat
          w-full
          min-h-[200vh]
          flex
          flex-col
      `};
      background-image: url(${BackgroundImage});
  `;
  
  const Background = tw.div`
      bg-[#001F33]
  `;
  </code></pre>
  <p>The result is that th animation works for the whole TeamSectionContainer component, indluding its background. I'm trying to make it so that none of the content is animated and only the background is.</p>
  <p>How could be this achieved?</p>