Draw a dashed path using Framer Motion in React

Question

I'm trying to draw a dashed path, or at least give that illusion, using Framer Motion. Think animating a foot path on a treasure map. Animating the path length seems to be a common method, and so I've implemented it like below.

<motion.span
     initial={{ pathLength: 0 }}
     animate={{ pathLength: 1 }}
     d="...a list of coordinates"
     stroke="#000"
     strokeWidth="5"
     strokeDasharray="8"
/>

But it appears animating the path length doesn't work well with strokeDasharray. When I add the strokeDasharray value using the attribute, the path length animates but the strokeDasharray value, when inspected, reads 2000px instead of 8px. And when I add the strokeDasharray using CSS or inline styling, the path is dashed correctly, but the animation doesn't work.

From what I've read, strokeDasharray uses the path length when doing it's computations, so I'm guessing the initial "0" value is throwing things off. Might be way off. I don't know.

Is there a simple fix here? Or should I reassess how I go about the animation? Thank you!

Answer 1

I had the same issue because i wanted to animate it with framer-motion and not in css. What i just did is i just put an exact copy of the path with the dashedArray line below the path which i'm going to animate. It will act as an overlay. I just gave it the stroke color of the background and tweaked the stroke-width. I don't know how it would be with a linearGradient background. But in my case with a static background color it worked.

import { motion } from 'framer-motion';

export default function Path({ pathColor, bg }) {
return (
    <svg
        width="245.24878"
        height="233.49042"
        viewBox="0 0 64.888737 61.777671"
        version="1.1"
        id="svg1033">
        <defs
            id="defs1030" />
        <g
            id="layer1"
            transform="translate(-20.472293,-22.027827)">
            <g
                id="g484"
                transform="translate(11.886667,6.306109)"
            >
                <motion.path
                    initial={{ pathLength: 0 }}
                    animate={{ pathLength: 1 }}
                    transition={{
                        pathLength: { delay: 0.4, type: "tween", duration: 3, bounce: 0 }
                    }}
                    stroke={pathColor}
                    strokeDasharray='3.846, 1.282'
                    strokeDashoffset='0'
                    strokeWidth='0.641'
                    style={{ fill: 'none', fillRule: 'evenodd', strokeLinejoin: 'round' }}
                    d="m 70.258127,15.782623 c 0,0 -1.867161,10.194243 -5.854843,12.473363 -9.471023,5.413069 -22.204956,-6.41444 -32.583479,-3.054701 -9.553598,3.092694 -21.015474,9.948708 -22.6557013,19.855557 -1.7758628,10.726077 5.8258513,25.311914 16.2917403,28.255989 11.258271,3.166974 19.313188,-18.990719 30.80157,-16.800859 5.208004,0.992724 10.182339,12.218805 10.182339,12.218805"
                    id="path1154"
                />
                <path
                    stroke={bg}
                    strokeDasharray='3.846, 2.282'
                    strokeDashoffset='0'
                    strokeWidth='1.641'
                    style={{ fill: 'none', fillRule: 'evenodd', strokeLinejoin: 'round' }}
                    d="m 70.258127,15.782623 c 0,0 -1.867161,10.194243 -5.854843,12.473363 -9.471023,5.413069 -22.204956,-6.41444 -32.583479,-3.054701 -9.553598,3.092694 -21.015474,9.948708 -22.6557013,19.855557 -1.7758628,10.726077 5.8258513,25.311914 16.2917403,28.255989 11.258271,3.166974 19.313188,-18.990719 30.80157,-16.800859 5.208004,0.992724 10.182339,12.218805 10.182339,12.218805"
                    id="path1155"
                />
            </g>
        </g>
    </svg>
  );
}

Answer 2

Not a solution using Framer Motion, but found this pen by Ruskinz that does the job using some css animation. The HTML looks like this:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="333" viewBox="0 0 340 333">
  <defs>
    <path id="path1" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 C46.039,146.545,53.039,128.545,66.039,133.545z" />
    <mask id="mask1"><use class="mask" xlink:href="#path1"></mask>
  </defs>
  <use class="paths" xlink:href="#path1" mask="url(#mask1)" />
</svg>

And the CSS looks like this:

.paths {
  fill: none;
  stroke: grey;
  stroke-dasharray: 5;
  stroke-width: 5;
  stroke-linejoin: round;
}

.mask {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

/* does not work in IE, need JS to animate there */
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

See the full pen at https://codepen.io/elliz/pen/prYqwx