title: Framer Motion pathLength property not working
body: <p>I ran into a weird issue with Framer Motion today.</p>
  <p>For some reason, this snippet (copied and pasted from their website) doesn't work, only the opacity is animated</p>
  <pre><code>import React from &quot;react&quot;;
  import { motion } from &quot;framer-motion&quot;;
  
  const icon = {
      hidden: {
          pathLength: 0,
          fill: &quot;rgba(255, 255, 255, 0)&quot;
      },
      visible: {
          pathLength: 1,
          fill: &quot;rgba(255, 255, 255, 1)&quot;,
          transition: { duration: 4 }
      }
  };
  
  const SVGComponent = props =&gt; {
      return (
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
              &lt;motion.path
                  d=&quot;M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z&quot;
                  variants={icon}
                  initial=&quot;hidden&quot;
                  animate=&quot;visible&quot;
              /&gt;
          &lt;/svg&gt;
      );
  };
  
  export default SVGComponent;
  </code></pre>
  <p>Hope you guys will be able to help out, thanks in advance!</p>