---
title: "MigrationPath — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Dulaj Design · Backgrounds. About MigrationPath brings dynamic, animated storytelling to your Framer projects."
canonical: "https://framer.elliotli.dev/component/migrationpath"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/MigrationPath

# MigrationPath

Animated journey paths

[View on Framer](https://framer.com/marketplace/components/migrationpath/?via=elliot-li)

![MigrationPath preview image 1](https://framer.elliotli.dev/og/component/migrationpath/ac487522824daeb0/1600x1200.jpg)

## Summary

About MigrationPath brings dynamic, animated storytelling to your Framer projects.

## Description

### 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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-03xivs4x-3qiD0BKVGTTEwZocUTUDhDLWovpOx9)

-   **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
    

### Need help?

Questions or feedback? Reach me anytime: [**dulajdilshan766@gmail.com**](mailto:dulajdilshan766@gmail.com) or on X **@Dulajweb**

## Rank history [How rankings work →](/terms#rankings)

-   All · #10705

## Details

- **Author**: Dulaj Design
- **Price**: $15.00
- **Published**: 2026-03-12
- **Updated**: 2026-08-28
- **Added**: 2026-03-08
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background