Why is this framer motion svg animation not working?

Question

I am trying to animate this SVG file:

"use client";
import { motion } from "framer-motion";

export default function Home() {
  return (
    <>
      <section>
        <motion.svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 300">
          <motion.path
            initial={{ pathLength: 0 }}
            animate={{ pathLength: 1 }}
            transition={{ duration: 8, ease: "easeInOut" }}
            fill="#FFF"
            d="M391,158.34l-0.03-0.02 ... "
          />
        </motion.svg>
      </section>

    </>
  );
}

The svg image is rendered, but with no animation.

I am trying to create a handwritten like animation @RobertLongson — Henrique B, Jun 07 '23 at 00:29
https://codepen.io/se7ensky/pen/waoMyx or https://codepen.io/munkholm/pen/EaZJQE — Robert Longson, Jun 07 '23 at 06:26

score 0 · Answer 1 · edited Jul 21 '23 at 04:25

The problem is that pathLength affects stroke, not fill. This path appears to have a fill and no stroke, so it won't change when pathLength changes.

The solution is to fix your SVG file in whatever SVG editor you're using. If you're using Illustrator, you may have used the "Outline Stroke" option, which converts stroke to fill. If you undo this action, the stroke will be back. However, if you're editing a vector file that you got online, there's no one easy fix to resolve this, and you may even have to redraw the effect with a single path instead of a filled object. There are steps you can take in Illustrator, but I'm fairly sure this won't look right in every possible case.

Why is this framer motion svg animation not working?

1 Answers1