---
title: "Animate a series of images | JavaScript maps SDK"
description: "Create animations using a sequence of image map sources."
---
> 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.
# Animate a series of images
Create an animation by utilizing a collection of [image sources](https://docs.maptiler.com/gl-style-specification/sources/#image) to form a sequence.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
maxZoom: 5.99,
minZoom: 4,
zoom: 5,
center: [-75.789, 41.874]
});
const frameCount = 5;
let currentImage = 0;
function getPath() {
return (
'https://docs.maptiler.com/sdk-js/assets/radar' +
currentImage +
'.gif'
);
}
map.on('load', function () {
map.addSource('radar', {
type: 'image',
url: getPath(),
coordinates: [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
id: 'radar-layer',
'type': 'raster',
'source': 'radar',
'paint': {
'raster-fade-duration': 0
}
});
setInterval(function () {
currentImage = (currentImage + 1) % frameCount;
map.getSource('radar').updateImage({ url: getPath() });
}, 200);
});
```
#### index.html
```html
Animate a series of images | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Animate a series of images
```
## Related examples
### [Raster layer](https://docs.maptiler.com/sdk-js/examples/raster-layer/)
Tutorials
Add a raster image overlay to the map.
### [Weather wind layer](https://docs.maptiler.com/sdk-js/examples/weather-wind/)
Examples
Visualize weather wind layer and get wind speed.