reactjs - Framer Motion length transition on SVG line

Question

So if I know that I can transition an svg path with something like the below:

const pathVariants = {
  inital: {
    opacity: 0,
    pathLength: 0
  },
  final: {
    opacity: 1,
    pathLength: 1,
    transition: {
      duration: 2,
      ease: "easeInOut"
    }
  }
};

//...

<motion.path 
        variants={pathVariants}
/>

but I can't seem to get the syntax for a motion.line. I tried lineLength instead of pathLength, but that didn't seem to work. Thoughts?

Answer 1

looks like there is a workaround like so:

const lineVariants = {
  animate: {
    strokeDashoffset: 0,
    transition: {
      duration: 1
    }
  },

  initial: {
    strokeDashoffset: 100
  }
};

//...

      <motion.line 
        variants={lineVariants}
        animate="animate"
        initial="initial"
        x1={lineX1} 
        y1={lineY1} 
        x2={lineX2} 
        y2={lineY2} 
        strokeWidth={stroke}
        pathLength="100"
        strokeDasharray="100"
      />