Scroll Driven Path

Installation

Architecture

This component utilizes Framer Motion's useScroll hook combined with the <motion.path> component.

By mapping the scrollYProgress (a value between 0 and 1) directly to the SVG's pathLength style property, we achieve a flawless, hardware-accelerated "drawing" animation that scrubs back and forth perfectly with the user's scroll wheel. No complex intersection observers required!

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ScrollDrivenPath } from "@/components/creative/scroll-driven-path";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ScrollDrivenPath } from "@/components/creative/scroll-driven-path";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ScrollDrivenPath
        pathData="example"
        viewBox="example"
        color="example"
      >
        <div>Content goes here</div>
      </ScrollDrivenPath>
    </div>
  );
}