---
title: "MaptilerAnimation | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

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

# Class MaptilerAnimation`Maptiler`

Animation controller for keyframe-based animation sequences.

MaptilerAnimation handles interpolation between keyframes, timing control, and event dispatching during animation playback.

#### Example[](#example)

```typescript
const animation = new MaptilerAnimation({
  keyframes: [
    { delta: 0, props: { x: 0, y: 0 } },
    { delta: 0.5, props: { x: 50, y: 20 } },
    { delta: 1, props: { x: 100, y: 0 } }
  ],
  duration: 1000, // milliseconds
  iterations: 2
});

animation.addEventListener("timeupdate", (event) => {
  // Use interpolated property values to update something
  console.log(event.props);
});

animation.play();
```

#### Remarks[](#remarks)

The animation supports various playback controls (play, pause, stop, reset), time manipulation, and an event system for tracking animation progress. Properties missing in keyframes will be automatically interpolated.

Animation events include play, pause, stop, timeupdate, iteration, and more.

When not using manualMode, animations are automatically added to the AnimationManager.

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[duration](#duration)

### Accessors[](#accessors)

[isPlaying](#isplaying)

### Methods[](#methods)

[addEventListener](#addeventlistener) [clone](#clone) [destroy](#destroy) [emitEvent](#emitevent) [getCurrentAndNextKeyFramesAtDelta](#getcurrentandnextkeyframesatdelta) [getCurrentAndNextKeyFramesAtTime](#getcurrentandnextkeyframesattime) [getCurrentDelta](#getcurrentdelta) [getCurrentTime](#getcurrenttime) [getPlaybackRate](#getplaybackrate) [pause](#pause) [play](#play) [removeEventListener](#removeeventlistener) [reset](#reset) [setCurrentDelta](#setcurrentdelta) [setCurrentTime](#setcurrenttime) [setPlaybackRate](#setplaybackrate) [stop](#stop) [update](#update) [updateInternal](#updateinternal)

## Constructors[](#constructors-1)

### `Maptiler`constructor[](#constructor)

-   new MaptilerAnimation(  
        \_\_namedParameters: [MaptilerAnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/MaptilerAnimationOptions/),  
    ): MaptilerAnimation[](#constructormaptileranimation)
    
    #### Parameters
    
    -   \_\_namedParameters: [MaptilerAnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/MaptilerAnimationOptions/)
    
    #### Returns MaptilerAnimation
    

## Properties[](#properties-1)

### `Readonly` `Maptiler`duration[](#duration)

duration: number

The duration of the animation in milliseconds (when playbackRate === 1)

## Accessors[](#accessors-1)

### `Maptiler`isPlaying[](#isplaying)

-   get isPlaying(): boolean
    
    Indicates if the animation is currently playing
    
    #### Returns boolean
    
    -   true if the animation is playing, false otherwise
    

## Methods[](#methods-1)

### `Maptiler`addEventListener[](#addeventlistener)

-   addEventListener(  
        type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/),  
        callback: [AnimationEventCallback](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventCallback/),  
    ): MaptilerAnimation[](#addeventlistener-1)
    
    Adds an event listener to the animation
    
    #### Parameters
    
    -   type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/)
        
        The type of event to listen for
        
    -   callback: [AnimationEventCallback](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventCallback/)
        
        The callback function to execute when the event occurs
        
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    

### `Maptiler`clone[](#clone)

-   clone(): MaptilerAnimation[](#clone-1)
    
    Creates a clone of this animation
    
    #### Returns MaptilerAnimation
    
    A new animation instance with the same properties as this one
    

### `Maptiler`destroy[](#destroy)

-   destroy(): void[](#destroy-1)
    
    Destroys the animation instance, removing all event listeners and stopping playback
    
    #### Returns void
    

### `Maptiler`emitEvent[](#emitevent)

-   emitEvent(  
        event: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/),  
        keyframe?: [Keyframe](https://docs.maptiler.com/sdk-js/api-reference/types/Keyframe/) | null,  
        nextKeyframe?: [Keyframe](https://docs.maptiler.com/sdk-js/api-reference/types/Keyframe/) | null,  
        props?: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<string, number\>,  
        previousProps?: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<string, number\>,  
    ): void[](#emitevent-1)
    
    Emits an event to all listeners of a specific type
    
    #### Parameters
    
    -   event: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/)
        
        The type of event to emit
        
    -   `Optional`keyframe: [Keyframe](https://docs.maptiler.com/sdk-js/api-reference/types/Keyframe/) | null
        
        The keyframe that triggered the event
        
    -   `Optional`nextKeyframe: [Keyframe](https://docs.maptiler.com/sdk-js/api-reference/types/Keyframe/) | null
    -   props: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<string, number\> = {}
        
        The interpolated properties at the current delta
        
    -   `Optional`previousProps: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<string, number\>
    
    #### Returns void
    

### `Maptiler`getCurrentAndNextKeyFramesAtDelta[](#getcurrentandnextkeyframesatdelta)

-   getCurrentAndNextKeyFramesAtDelta(  
        delta: number,  
    ): {  
        current: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null;  
        next: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null;  
    }[](#getcurrentandnextkeyframesatdelta-1)
    
    Gets the current and next keyframes at a specific delta value
    
    #### Parameters
    
    -   delta: number
        
        The delta value to query
        
    
    #### Returns { current: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null; next: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null }
    
    Object containing current and next keyframes, which may be null
    

### `Maptiler`getCurrentAndNextKeyFramesAtTime[](#getcurrentandnextkeyframesattime)

-   getCurrentAndNextKeyFramesAtTime(  
        time: number,  
    ): {  
        current: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null;  
        next: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null;  
    }[](#getcurrentandnextkeyframesattime-1)
    
    Gets the current and next keyframes at a specific time
    
    #### Parameters
    
    -   time: number
        
        The time position to query
        
    
    #### Returns { current: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null; next: [InterpolatedKeyFrame](https://docs.maptiler.com/sdk-js/api-reference/types/InterpolatedKeyFrame/) | null }
    
    Object containing current and next keyframes, which may be null
    

### `Maptiler`getCurrentDelta[](#getcurrentdelta)

-   getCurrentDelta(): number[](#getcurrentdelta-1)
    
    Gets the current delta value of the animation
    
    #### Returns number
    
    The current delta value (normalized progress between 0 and 1)
    

### `Maptiler`getCurrentTime[](#getcurrenttime)

-   getCurrentTime(): number[](#getcurrenttime-1)
    
    Gets the current time position of the animation
    
    #### Returns number
    
    The current time in milliseconds
    

### `Maptiler`getPlaybackRate[](#getplaybackrate)

-   getPlaybackRate(): number[](#getplaybackrate-1)
    
    Gets the current playback rate
    
    #### Returns number
    
    The current playback rate
    

### `Maptiler`pause[](#pause)

-   pause(): MaptilerAnimation[](#pause-1)
    
    Pauses the animation
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Event[](#event)
    
    "pause"
    

### `Maptiler`play[](#play)

-   play(): MaptilerAnimation[](#play-1)
    
    Starts or resumes the animation
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Event[](#event-1)
    
    "play"
    

### `Maptiler`removeEventListener[](#removeeventlistener)

-   removeEventListener(  
        type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/),  
        callback: [AnimationEventCallback](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventCallback/),  
    ): MaptilerAnimation[](#removeeventlistener-1)
    
    Removes an event listener from the animation
    
    #### Parameters
    
    -   type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/)
        
        The type of event to remove
        
    -   callback: [AnimationEventCallback](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventCallback/)
        
        The callback function to remove
        
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    

### `Maptiler`reset[](#reset)

-   reset(manual?: boolean): MaptilerAnimation[](#reset-1)
    
    Resets the animation to its initial state without stopping
    
    #### Parameters
    
    -   manual: boolean = true
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Event[](#event-2)
    
    "reset"
    

### `Maptiler`setCurrentDelta[](#setcurrentdelta)

-   setCurrentDelta(delta: number): MaptilerAnimation[](#setcurrentdelta-1)
    
    Sets the current delta value of the animation
    
    #### Parameters
    
    -   delta: number
        
        The delta value to set (normalized progress between 0 and 1)
        
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Throws[](#throws)
    
    Error if delta is greater than 1
    
    #### Event[](#event-3)
    
    "scrub"
    

### `Maptiler`setCurrentTime[](#setcurrenttime)

-   setCurrentTime(time: number): MaptilerAnimation[](#setcurrenttime-1)
    
    Sets the current time position of the animation
    
    #### Parameters
    
    -   time: number
        
        The time to set in milliseconds
        
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Throws[](#throws-1)
    
    Error if time is greater than the duration
    
    #### Event[](#event-4)
    
    "scrub"
    

### `Maptiler`setPlaybackRate[](#setplaybackrate)

-   setPlaybackRate(rate: number): MaptilerAnimation[](#setplaybackrate-1)
    
    Sets the playback rate of the animation
    
    #### Parameters
    
    -   rate: number
        
        The playback rate (1.0 is normal speed)
        
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Event[](#event-5)
    
    "playbackratechange"
    

### `Maptiler`stop[](#stop)

-   stop(silent?: boolean): MaptilerAnimation[](#stop-1)
    
    Stops the animation and resets to initial state
    
    #### Parameters
    
    -   silent: boolean = false
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Event[](#event-6)
    
    "stop"
    

### `Maptiler`update[](#update)

-   update(manual?: boolean, ignoreIteration?: boolean): MaptilerAnimation[](#update-1)
    
    Updates the animation state, interpolating between keyframes and emitting events as necessary
    
    #### Parameters
    
    -   manual: boolean = true
    -   ignoreIteration: boolean = false
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining
    
    #### Event[](#event-7)
    
    "timeupdate"
    
    #### Event[](#event-8)
    
    "keyframe"
    
    #### Event[](#event-9)
    
    "iteration"
    
    #### Event[](#event-10)
    
    "animationend"
    

### `Maptiler`updateInternal[](#updateinternal)

-   updateInternal(): MaptilerAnimation[](#updateinternal-1)
    
    Updates the animation state if playing, this is used by the AnimationManager to update all animations in the loop
    
    #### Returns MaptilerAnimation
    
    This animation instance for method chaining