Originally published in the Map Animation Studio guides. I work on Map Animation Studio. AI assistance was used to prepare this illustrated cross-post.
Choose endpoints and a travel mode, then coordinate the path, transport marker, and camera.
A useful route animation makes the departure, journey, and arrival clear. The action picker contains illustrative previews; set your own endpoints in Properties after adding the action. Use the London–Paris example as a reference for framing and pacing.
Watch the result
London → Paris · Play the finished example. The steps below teach a similar workflow, not an exact reconstruction of its settings. This map example has no narration.
Watch the finished map animation.
The actual London → Paris Studio project: edit actions on the left, preview the map in the center, and arrange timing below. This is an example copy; blank projects do not show Change places.
1. Add a route action
Choose Travel along route in Add action. It controls the path and transport marker; configure camera following under Camera mode in its properties.
1.1 Choose Travel along route in the route group. Its built-in preview is illustrative; set London and Paris after adding.
London → Paris project: Select Travel along route. The built-in preview is illustrative; configure your endpoints after adding.
Check: The action appears in the scene and exposes route properties when selected.
2. Verify endpoints and the travel mode
Search for London and Paris separately and verify each country. Select an available travel mode that fits the story and wait for route generation. Resolve any route lookup error before treating the preview as a real itinerary.
2.1 Search and confirm each endpoint, then choose the mode. The screenshot shows Greater London → Paris with Car selected.
London → Paris project: The London and Paris endpoint fields and the selected car travel mode.
Check: The route connects the intended locations in the correct direction.
3. Frame the journey
Use a wider view to explain the whole journey, then a following camera for closer detail. Choose a path color, width, and transport marker that remain legible on the basemap. Fix overly distant framing before enlarging the marker.
3.1 Choose following or overview under Camera mode. The screenshot currently uses a fixed camera; avoid conflicts with existing camera actions.
London → Paris project: Camera mode and motion pacing. This example currently uses a fixed camera; choose a following mode when appropriate.
3.2 Adjust color, opacity, and width under Appearance, then review their contrast on the map.
London → Paris project: Route color, opacity, and width. Check their contrast in the map preview.
Check: The route and travel direction remain clear in a smaller preview.
4. Review departure and arrival
Try a six- to eight-second route action. Watch it from start to finish, checking that the marker departs from the start and reaches the destination. Hold for about a second before the next shot.
4.1 Open the timing fields. This example starts around 3.36 seconds for 8.64 seconds; review departure and arrival before changing the pace.
London → Paris project: Travel timing: starts around 3.36 seconds and lasts 8.64 seconds. These are the example settings, not mandatory values.
Check: Paris is visible at the end and the path does not disappear midway or play backward.
One detail to remember
Treat the result as a story visualization rather than live navigation. Check the generated path and travel mode carefully for international or sea crossings.
Make your own version
Replace the example with a city you know, finish a short sequence, and review it end to end. Make one clear story before adding more effects.
Open Studio and make your own route animation.
Visit Map Animation Studio to explore the editor and other video tutorials.
Top comments (0)