How can I animate elements on maps?

In this article, we’ll explain how to animate icons, lines, polygons, and other elements.

This documentation is always evolving.

Creating an animation can generally be broken down into two main stages:

1. Keyframe animation – controlling the ‘’camera movement’’ by panning across areas, zooming in or out, rotating or tilting the view. You can learn more about this stage here.
   
   
2. Element animation – animating objects added on top of the map, such as routes, labels, or icons. In this article, we’ll take a closer look at this process.

Before we start animating the elements, we need to create keyframes. Let’s create a 5-second video with a static shot by adding a single keyframe at the 5-second mark on the timeline.

To animate an element, first add it as usual, then click the ‘’Animate’’ button in the bottom-right corner. The animation will start from the point where the playhead is positioned.

Animation settings

To adjust the animation, you can use either the settings menu on the bottom right, or the timeline.

The start and end of the animation can be set in the menu, or by dragging and stretching the element on the timeline.

Entry and exit animation types can be selected in the animation menu:


The chosen animation type is also displayed on the timeline, and you’ll see each annotation type is differentiated by color.

For grow or fade animations, the bar shows handles that mark the start and end of the effect. The body of the bar indicates when the element is static (after the entry animation ends and before the exit animation begins).

With the Instant animation, the element appears and disappears without any effects, so it is displayed as a simple bar. 

Feel free to experiment with different combinations of entry and exit animations.

Depending on the chosen entry and exit animation, you can use the following easing options:
- Ease
- Linear
- Bounce
- Elastic
- Overshoot

The duration can be set in the menu, or by dragging the element’s handles on the timeline. This applies specifically to the entry or exit animation (for example, how long it takes for the element to fully grow or fade in). This is why the duration is not available for elements with instant animation.

You can remove an animation by clicking the crossed-out camera icon in the animation menu, or by selecting the element on the timeline and pressing the Backspace/Delete key.