Animate SVG Paths with Framer Motion

Will Johnson: [0:01] The last thing I want to do is animate this bag SVG when the page loads. Let's move over to Bag.js, uncomment the import { motion } from "framer-motion".

[0:14] Next thing I want to do is paste in a variant. Trust me, it was a lot easier for me to paste that in instead of you watching me type this all out. I made a variant called svgVariants. This variant label of start has opacity of -- that means it is invisible -- and a pathLength of , and that's for the SVG. It starts at the very beginning of the path and it's invisible when it starts.

[0:41] When it finishes, or the variant label of finished, we want the opacity to be 1. We want the entire thing to be visible. We want the pathLength to be 1, so we want it to finish the entire path. It also has a transition, which we want it to take about two seconds and use the ease of "easeInOut". Basically, it'll come in slow and then finish fast.

[1:11] Next thing we want to do is go to where our SVG is being rendered. Here on the path, we want to change path into motion.path to make it a motion component.

[1:23] The next thing we want to do is add a variants prop. We're going to set it to svgVariants, which is the same variant that we created further up in the file here, svgVariants.

[1:44] Then we will have the initial prop. It'll use the variant label of "start". Then we'll add the animate prop. Remember that the animate prop is the final state that we want the animation to end up in. We will set this to "finished". As you see, and I say, they refresh the page and actually drew the path for the SVG.

[2:16] To recap, we created a variant for our SVG. Had to start off at the beginning of the path and being invisible. Finish it off being visible. Completed the entire length of the path. We took the path element and created a motion.component out of it. We took the variants and set it to the SVG variants we completed.

[2:38] We took initial and set it to the variant label of "start", and to finish the animation, we set animate to the "finished" variant label.