Scroll SVG Path with Framer Motion

Hello! Over the past few days, I’ve been diving into the world of SVG path animations that respond to user scroll input.

While the concept is fascinating, I found the original documentation a bit challenging to follow. So, I decided to break it down and share my learnings in this post. If you’ve ever wanted to create a scroll-based SVG path animation, this guide is for you. Let’s get started!

---

What Are SVG Path Animations?

SVG (Scalable Vector Graphics) path animations allow you to animate the drawing of a path, creating effects like lines being drawn or shapes being revealed. When combined with scroll-based interactions, these animations can add a dynamic and engaging touch to your website.

In this tutorial, we’ll use Framer Motion, a powerful animation library for React, to create an SVG path animation that unfolds as the user scrolls.

---

The Code Breakdown

Let’s walk through the code step by step to understand how it works.

1. Setting Up the Environment

First, ensure you have Framer Motion installed in your React project. If not, you can install it using:
First, ensure you have Framer Motion installed in your React project. If not, you can install it using:

npm install framer-motion

2. Importing Required Modules

We’ll need a few tools from Framer Motion to make this work:

import { useScroll, useTransform, motion } from "framer-motion";
import { useRef } from "react";

• useScroll: Tracks the scroll progress of a target element.
• useTransform: Maps the scroll progress to a value we can use for animation.
• motion: Provides animated components like motion.svg and motion.path.

3. Creating the Component

Here’s the main component that handles the animation:

export default function Flower() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["0.1 end", "0.7 end"],
  });

  const pathLength = useTransform(scrollYProgress, [0, 1], [0, 1]);

  return (
    <div ref={ref} className="w-full pt-10 md:pt-20">
      <motion.svg
        className="w-full"
        viewBox="0 0 1000 1000"
        preserveAspectRatio="xMidYMid meet"
        xmlns="http://www.w3.org/2000/svg"
      >
        <motion.path
          style={{ pathLength }}
          strokeWidth={2}
          stroke="black"
          fill="none"
          d="M1.25,240.24c4.39-38.39..." //use your own svg path!
        />
      </motion.svg>
    </div>
  );
}

Key Points:

• useRef: Creates a reference to the container element, which we’ll track for scroll progress.
• useScroll: Tracks the scroll progress of the referenced element. The offset property defines when the animation starts and ends relative to the viewport.
• useTransform: Maps the scroll progress (scrollYProgress) to a pathLength value between 0 and 1. This controls how much of the path is visible.
• motion.path: The SVG path element that gets animated. The pathLength property is dynamically updated based on the scroll progress.

4. Customizing the SVG Path

The d attribute in the element defines the shape of the path. Replace the placeholder d value with your own SVG path data. You can generate this using tools like SVG Path Editor or export it from design software like Figma or Illustrator.

---

How It Works

1. As the user scrolls, the scrollYProgress value changes from 0 to 1.
2. This value is mapped to the pathLength property of the element.
3. The pathLength property controls how much of the path is visible, creating the effect of the path being drawn.

---

Tips for Customization

**Adjust the Offset:** Change the offset values in useScroll to control when the animation starts and ends.

**Add Multiple Paths:** You can animate multiple paths by adding more <motion.path> elements and mapping their pathLength to different scroll ranges.

**Experiment with Styles:** Customize the stroke, strokeWidth, and fill properties to match your design.

---

Final Thoughts

Scroll-based SVG path animations are a great way to add interactivity and visual interest to your website. With Framer Motion, the process becomes straightforward and highly customizable. I hope this guide helps you get started with your own animations. If you have any questions or want to share your creations, feel free to reach out!

Happy coding! 🎉