---
title: "Animation | 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.

# Interface Animation

The **`Animation`** interface of the Web Animations API represents a single animation player and provides playback controls and a timeline for an animation node or source.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation)

interface Animation {  
    [currentTime](#currenttime): [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/) | null;  
    [effect](#effect): [AnimationEffect](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEffect/) | null;  
    [finished](#finished): Promise<Animation\>;  
    [id](#id): string;  
    [oncancel](#oncancel): ((this: Animation, ev: [AnimationPlaybackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationPlaybackEvent/)) \=> any) | null;  
    [onfinish](#onfinish): ((this: Animation, ev: [AnimationPlaybackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationPlaybackEvent/)) \=> any) | null;  
    [onremove](#onremove): ((this: Animation, ev: [AnimationPlaybackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationPlaybackEvent/)) \=> any) | null;  
    [overallProgress](#overallprogress): number | null;  
    [pending](#pending): boolean;  
    [playbackRate](#playbackrate): number;  
    [playState](#playstate): [AnimationPlayState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AnimationPlayState/);  
    [ready](#ready): Promise<Animation\>;  
    [replaceState](#replacestate): [AnimationReplaceState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AnimationReplaceState/);  
    [startTime](#starttime): [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/) | null;  
    [timeline](#timeline): [AnimationTimeline](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationTimeline/) | null;  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: Animation, ev: [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [addEventListener](#addeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [cancel](#cancel-1)(): void;  
    [commitStyles](#commitstyles-1)(): void;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [finish](#finish-1)(): void;  
    [pause](#pause-1)(): void;  
    [persist](#persist-1)(): void;  
    [play](#play-1)(): void;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: Animation, ev: [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [removeEventListener](#removeeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [reverse](#reverse-1)(): void;  
    [updatePlaybackRate](#updateplaybackrate-1)(playbackRate: number): void;  
}

#### Hierarchy

-   EventTarget
    -   Animation

##### Index

### Properties[](#properties)

[currentTime](#currenttime) [effect](#effect) [finished](#finished) [id](#id) [oncancel](#oncancel) [onfinish](#onfinish) [onremove](#onremove) [overallProgress](#overallprogress) [pending](#pending) [playbackRate](#playbackrate) [playState](#playstate) [ready](#ready) [replaceState](#replacestate) [startTime](#starttime) [timeline](#timeline)

### Methods[](#methods)

[addEventListener](#addeventlistener) [cancel](#cancel) [commitStyles](#commitstyles) [dispatchEvent](#dispatchevent) [finish](#finish) [pause](#pause) [persist](#persist) [play](#play) [removeEventListener](#removeeventlistener) [reverse](#reverse) [updatePlaybackRate](#updateplaybackrate)

## Properties[](#properties-1)

### currentTime[](#currenttime)

currentTime: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/) | null

The **`Animation.currentTime`** property of the Web Animations API returns and sets the current time value of the animation in milliseconds, whether running or paused.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/currentTime)

### effect[](#effect)

effect: [AnimationEffect](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEffect/) | null

The **`Animation.effect`** property of the Web Animations API gets and sets the target effect of an animation. The target effect may be either an effect object of a type based on AnimationEffect, such as KeyframeEffect, or null.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/effect)

### `Readonly`finished[](#finished)

finished: Promise<Animation\>

The **`Animation.finished`** read-only property of the Web Animations API returns a Promise which resolves once the animation has finished playing.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/finished)

### id[](#id)

id: string

The **`Animation.id`** property of the Web Animations API returns or sets a string used to identify the animation.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/id)

### oncancel[](#oncancel)

oncancel: ((this: Animation, ev: [AnimationPlaybackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationPlaybackEvent/)) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/cancel_event)

### onfinish[](#onfinish)

onfinish: ((this: Animation, ev: [AnimationPlaybackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationPlaybackEvent/)) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/finish_event)

### onremove[](#onremove)

onremove: ((this: Animation, ev: [AnimationPlaybackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationPlaybackEvent/)) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/remove_event)

### `Readonly`overallProgress[](#overallprogress)

overallProgress: number | null

The **`overallProgress`** read-only property of the Animation interface returns a number between 0 and 1 indicating the animation's overall progress towards its finished state. This is the overall progress across all of the animation's iterations, not each individual iteration.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/overallProgress)

### `Readonly`pending[](#pending)

pending: boolean

The read-only **`Animation.pending`** property of the Web Animations API indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/pending)

### playbackRate[](#playbackrate)

playbackRate: number

The **`Animation.playbackRate`** property of the Web Animations API returns or sets the playback rate of the animation.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/playbackRate)

### `Readonly`playState[](#playstate)

playState: [AnimationPlayState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AnimationPlayState/)

The read-only **`Animation.playState`** property of the Web Animations API returns an enumerated value describing the playback state of an animation.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/playState)

### `Readonly`ready[](#ready)

ready: Promise<Animation\>

The read-only **`Animation.ready`** property of the Web Animations API returns a Promise which resolves when the animation is ready to play. A new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/ready)

### `Readonly`replaceState[](#replacestate)

replaceState: [AnimationReplaceState](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.AnimationReplaceState/)

The read-only **`Animation.replaceState`** property of the Web Animations API indicates whether the animation has been removed by the browser automatically after being replaced by another animation.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/replaceState)

### startTime[](#starttime)

startTime: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/) | null

The **`Animation.startTime`** property of the Animation interface is a double-precision floating-point value which indicates the scheduled time when an animation's playback should begin.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/startTime)

### timeline[](#timeline)

timeline: [AnimationTimeline](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationTimeline/) | null

The **`Animation.timeline`** property of the Animation interface returns or sets the timeline associated with this animation. A timeline is a source of time values for synchronization purposes, and is an AnimationTimeline-based object. By default, the animation's timeline and the Document's timeline are the same.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/timeline)

## Methods[](#methods-1)

### addEventListener[](#addeventlistener)

-   addEventListener<[K](#addeventlistenerk) extends keyof [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: Animation, ev: [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-1)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)
    
    #### Parameters
    
    -   type: [K](#addeventlistenerk)
    -   listener: (this: Animation, ev: [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\[[K](#addeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    
-   addEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-2)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    

### cancel[](#cancel)

-   cancel(): void[](#cancel-1)
    
    The Web Animations API's **`cancel()`** method of the Animation interface clears all KeyframeEffects caused by this animation and aborts its playback.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/cancel)
    
    #### Returns void
    

### commitStyles[](#commitstyles)

-   commitStyles(): void[](#commitstyles-1)
    
    The **`commitStyles()`** method of the Web Animations API's Animation interface writes the computed values of the animation's current styles into its target element's style attribute.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/commitStyles)
    
    #### Returns void
    

### dispatchEvent[](#dispatchevent)

-   dispatchEvent(event: Event): boolean[](#dispatchevent-1)
    
    The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)
    
    #### Parameters
    
    -   event: Event
    
    #### Returns boolean
    
    Inherited from EventTarget.dispatchEvent
    

### finish[](#finish)

-   finish(): void[](#finish-1)
    
    The **`finish()`** method of the Web Animations API's Animation Interface sets the current playback time to the end of the animation corresponding to the current playback direction.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/finish)
    
    #### Returns void
    

### pause[](#pause)

-   pause(): void[](#pause-1)
    
    The **`pause()`** method of the Web Animations API's Animation interface suspends playback of the animation.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/pause)
    
    #### Returns void
    

### persist[](#persist)

-   persist(): void[](#persist-1)
    
    The **`persist()`** method of the Web Animations API's Animation interface explicitly persists an animation, preventing it from being automatically removed when it is replaced by another animation.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/persist)
    
    #### Returns void
    

### play[](#play)

-   play(): void[](#play-1)
    
    The **`play()`** method of the Web Animations API's Animation Interface starts or resumes playing of an animation. If the animation is finished, calling play() restarts the animation, playing it from the beginning.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/play)
    
    #### Returns void
    

### removeEventListener[](#removeeventlistener)

-   removeEventListener<[K](#removeeventlistenerk) extends keyof [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: Animation, ev: [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-1)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)
    
    #### Parameters
    
    -   type: [K](#removeeventlistenerk)
    -   listener: (this: Animation, ev: [AnimationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.AnimationEventMap/)\[[K](#removeeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    
-   removeEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-2)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    

### reverse[](#reverse)

-   reverse(): void[](#reverse-1)
    
    The **`Animation.reverse()`** method of the Animation Interface reverses the playback direction, meaning the animation ends at its beginning. If called on an unplayed animation, the whole animation is played backwards. If called on a paused animation, the animation will continue in reverse.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/reverse)
    
    #### Returns void
    

### updatePlaybackRate[](#updateplaybackrate)

-   updatePlaybackRate(playbackRate: number): void[](#updateplaybackrate-1)
    
    The **`updatePlaybackRate()`** method of the Web Animations API's Animation Interface sets the speed of an animation after first synchronizing its playback position.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Animation/updatePlaybackRate)
    
    #### Parameters
    
    -   playbackRate: number
    
    #### Returns void