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.

Great for

Travel itineraries and trip logs

Company history and milestone timelines

Product shipping or supply chain visualizations

Educational migration maps and geography lessons

Step-by-step process sections

Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

Need help? Questions or feedback? Reach me anytime: We stand by the quality of our components. If you encounter any bugs, technical issues, or errors that prevent you from being fully satisfied with your purchase, please reach out to us at dulajdilshan766@gmail.com within 7 days. If we cannot resolve the issue, we will issue a full refund immediately.