Scroll SVG Path with Framer Motion

Here is the organized content:

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.

The Code Breakdown

Setting Up the Environment

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

npm install framer-motion

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';

Creating the Component

Here’s the main component that handles the animation:

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..."
        />
      </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.

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 <motion.path> 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!