Mapbox - animation test

by fxi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/2.0.1/mapbox-gl.js"></script>
<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZnJlZGZ4aSIsImEiOiJja2psOTE5YWgwNm1jMnJxcDhmY25qc2gwIn0.VM7P6iTelL_rFnxTkO7LBQ';
var map = new mapboxgl.Map({
  container: 'map',
  style: {
    "version": 8,
    "name": "studio_is_for_kiddo",
    "center": [6.486133305217123, 46.02544605076176],
    "zoom": 10.84,
    "bearing": 112.79,
    "pitch": 78.5,
    "light": {
      "intensity": 1,
      "color": "hsl(59, 0%, 100%)",
      "position": [
        0.9,
        0,
        0
      ],
      "anchor": "viewport"
    },
    "sources": {
      "mapbox-sat": {
        "url": "mapbox://mapbox.satellite",
        "type": "raster",
        "tileSize": 256
      },
      "mapbox-dem": {
        "url": "mapbox://mapbox.terrain-rgb",
        "type": "raster-dem",
        "tileSize": 256
      },
      "composite": {
        "url": "mapbox://mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2",
        "type": "vector"
      }
    },
    "sprite": "mapbox://sprites/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y/4snix0v8fnkivnb584t41dzcl",
    "glyphs": "mapbox://fonts/mapbox-map-design/{fontstack}/{range}.pbf",
    "layers": [{
        "id": "background",
        "type": "background",
        "layout": {},
        "paint": {
          "background-color": "hsla(308, 60%, 31%, 0.95)"
        }
      },
      {
        "id": "elevation",
        "type": "fill",
        "source": "composite",
        "source-layer": "contour",
        "paint": {
          "fill-color": [
            "interpolate",
            [
              "linear"
            ],
            [
              "get",
              "ele"
            ],
            0,
            "hsla(312, 0%, 0%, 0.25)",
            200,
            "hsla(312, 0%, 0%, 0.25)",
            1250,
            "hsla(308, 60%, 31%, 0.95)",
            4500,
            "hsla(308, 65%, 55%, 0.95)"
          ]

        }
      },

      {
        "id": "hillshading",
        "type": "fill",
        "source": "composite",
        "source-layer":...