velements

Maps & Routes

Animated maps: routes, pins and globes

Updated September 18, 20263 min read

How do you animate a route on a map?

Use a map preset: set your start and end points, choose the line color and speed, and the route draws itself between pins. Flight paths, delivery routes and rotating dot globes all export as MP4 or transparent WebM for use over any background.

A route on a map explains distance, reach and logistics faster than a sentence. These presets draw flight lines, drop travel pins, highlight countries, spin dot globes and run delivery grids.

Five maps & routes presets to start from

Hover any card to play it. Opening one loads it in the editor with every control unlocked.

  • Glowing flight arcs launch between major cities across a dotted world map, with travelling planes and landing pulses on loop.

  • Map pins drop at each stop while a dashed travel route draws from city to city across a minimal grid map.

  • A region of the dotted world map lights up in a glowing wave, pulses and gets an editable label callout.

  • A dotted 3D globe spins seamlessly while glowing connection arcs link cities around the world.

  • A delivery marker follows a glowing route through an abstract city street grid to a pulsing destination pin.

All maps & routes

How to make one in the browser

  1. 01Open a maps & routes presetBrowse the Maps & Routes category and open the preset closest to what you need. It loads in the editor with every control unlocked.
  2. 02Make it yoursRewrite the text, set your brand colors and font, adjust easing and duration, and switch the aspect ratio for the platform you are posting to.
  3. 03Export the clipChoose MP4 for a normal track or transparent WebM for an overlay, pick a resolution up to 8K, and the file renders on your own machine.

Which format should you export?

Use MP4 when the clip sits on its own track or fills the frame. Use transparent WebM whenever it has to float over your own footage: the alpha channel is real, so no keying or blend mode is needed.

Format
MP4 H.264 · WebM VP9
Alpha
Transparent WebM
Resolution
720p to 8K
Aspect
16:9 · 9:16 · 1:1 · 4:5
License
Commercial use included

Three tips that make it look intentional

  • Two or three stops per clip; more turns the map into a diagram.
  • Let the line finish before the label appears.
  • Use a muted map and a bright route so the path is the only thing moving.

Frequently asked

Are the maps geographically accurate?
They are stylised dot and outline maps built for legibility on video rather than for navigation.
Can I pick specific countries?
Highlight presets let you choose the region and the accent color for it.
  • Flags & Banners

    Flag animations: waving flags, bunting and banners

    Pick a flag preset and set the colors of the bands or upload your own artwork where supported. The wave is simulated per frame, so the cloth keeps moving naturally for as long as you need, and a seamless loop avoids a visible restart.

    Read the guide
  • Networks & AI

    AI and network graphics: neural nets, pipelines and servers

    Show structure rather than magic: a neural network firing layer by layer, a prompt streaming into tokens, an agent graph routing a task, a data pipeline moving records, or a rack serving requests. Each one gives narration something concrete to point at.

    Read the guide
  • Weather Graphics

    Weather graphics: forecasts, radar and alerts

    Use a forecast preset: enter the days, temperatures and conditions, set your colors, and export. Storm fronts, rain radar sweeps and severe weather alert bars cover the rest of a bulletin, and everything adapts to vertical for social clips.

    Read the guide