About MigrationPath

About

MigrationPath brings dynamic, animated storytelling to your Framer projects. Whether you're mapping out a travel itinerary, a company timeline, or an actual wildlife migration, this component allows you to draw beautiful, customizable paths over any background image or color. Choose between smooth curves or sharp lines, add interactive markers, and let the path animate as visitors scroll through your site.

What it does

It renders an animated SVG path across a customizable background (image or color) connecting a series of markers. The component supports various smoothing algorithms like Bezier and Spline to ensure the path looks organic. It handles complex animations including "Draw" (auto playing) and "Scrub" (tied to scroll), while offering a built-in grid overlay and layout controls to ensure the map fits perfectly within any container.

What you can customize

Layout & Background: Toggle between Stretch, Cover, or Contain modes. Set background images, adjust corner radius and padding, and enable a background grid for a "technical" look.
Path Styling: Choose between Linear, Bezier, or Spline smoothing. Customize stroke width, use solid colors or gradients, and add a glow effect. You can also switch between solid and dashed lines.
Markers & Labels: Switch markers between dots or icons. Adjust marker size, ring width, and colors. Fully customize label fonts (using Inter or others), colors, and visibility for each point.
Animation Engine: Control the trigger (On Scroll or Immediate), the mode (Draw or Scrub), and fine-tune the duration, speed, and playback loops to match your page's rhythm.