Animating Path Length

Animating pathLength in Motion is a powerful way to bring SVGs to life. It works with any SVG path and can create interesting and unique effects when paired with hand-drawn SVGs.

Checkbox

This checkbox animation is very straightforward. First, we have to turn the path that forms the checkbox in the SVG into a motion.path.

After that, we can add pathLength and set the value anywhere between 0, which means the path is invisible, and 1, which means that the path is fully drawn.

<motion.path
  d="M1 4L3.5 6.5L9 1"
  strokeWidth="2"
  strokeLinecap="round"
  strokeLinejoin="round"
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
  transition={{
    type: "spring",
    duration: 0.35,
    bounce: 0,
  }}
/>

You can use this in the initial, animate and exit properties just like any other motion value.

Hand Drawn SVGs

Animating pathLength works great with hand-drawn SVGs. I usually start by creating the SVGs in Figma.

After that, I export the code and animate it using Motion. This is convenient as it allows you to animate pretty much any shape.

One thing to keep in mind is that you are only animating a single path. For more complex shapes, combining everything in a single path can create results that don't look great and don't animate properly.

I'd recommend splitting more complex SVGs into multiple paths so you can control the animation of each one individually.

More

In case you have any questions reach me at jakub@kbo.sk, see more of my work on Twitter or subscribe to my newsletter.