Modern to Prehistoric transition

<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
  </head>
  <body>
    <style>
body {
    overflow: hidden;
}

body * {
   -webkit-touch-callout: none;
     -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
}

.map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
    </style>
    
    <div id='before' class='map'></div>
    <script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHdlbGNoIiwiYSI6ImNqZW5vazRvcjEyczAyd25xamczMmh3OG0ifQ.vJy47O0vb1Z_F7OWIbZpyg';
var map = new mapboxgl.Map({
    container: 'before',
    style: 'mapbox://styles/twelch/cjk2vwft2c4hq2sqvcz2gixe5',
    center: [-111.835493, 33.436899],
    zoom: 11,
    pitch: 45
});

map.on('load', function() {
	setTimeout(function() {
    map.fitBounds([
      [-111.845, 33.420],
      [-111.823, 33.444]
    ], {
      speed: 0.15
    });
  }, 2000);
});
    </script>
  </body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js