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.
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.
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.
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
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.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
