---
title: "MaptilerAnimation | JavaScript maps SDK"
description: "Smooth keyframe animations and playback controls with MapTilerAnimation."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# MaptilerAnimation

The `MaptilerAnimation` class provides utilities for animating between keyframes with custom easing and playback controls. It supports event-based hooks for frame updates and works with rendering loops or UI transitions.

**Example**

```js
// Linearly animated between values
const animation = new MaptilerAnimation({
  keyframes: [
    // props are interpolated across the duration
    { delta: 0, props: { lon: -7.445 } },
    // userData can hold any type of custom data to pass with the keyframe
    { delta: 0.5, userData: { mydata: "whoa!" } },
    { delta: 1, props: { lon: -7.473 } },
  ],
  duration: 1000, // 1 second
  iterations: Infinity, // loop forever
});

const marker = new Marker().setLngLat(
  new LngLat(
    -7.449346225791231,
    39.399728941536836,
  )
).addTo(map);

// TimeUpdate is fired every frame
animation.addEventListener(AnimationEventTypes.TimeUpdate, (e) => {
  marker.setLngLat(
    new LngLat(
      e.props.lon,
      39.399728941536836,
    )
  );
});

// Fired when the keyframe changes
animation.addEventListener(AnimationEventTypes.Keyframe, ({ userData }) => {
  console.log(userData.mydata); // "whoa!"
});

animation.play();
```

![](./animate-linear-trimmed.webp)

```js
// Eased between values
const animation = new maptilersdk.MaptilerAnimation({
  keyframes: [
    // props are interpolated across the duration
    { delta: 0, easing: EasingFunctionName.ElasticInOut, props: { lon: -7.445 } },
    { delta: 1, props: { lon: -7.455 } },
  ],
  duration: 1000, // 1 second
  iterations: Infinity, // loop forever
});
```

![](./animate-elastic-trimmed.webp)

## API reference

[Class MaptilerAnimation](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerAnimation/)

## Related examples

-   [MaptilerAnimation with 3D module](https://docs.maptiler.com/sdk-js/examples/maptiler-animation/)
-   [Animations and animated routes](https://docs.maptiler.com/sdk-js/examples/animated-route/)