GTA V5 style easing

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css' rel='stylesheet' />
    <link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet">
    <style>
        body {
            margin:0;
            padding:0;
            font: 14px/20px 'Overpass Mono';
        }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #top-left {
            position:absolute;
            top: 5px;
            left: 5px;
        }
        button {
            font: inherit;
            background: yellow;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

<div id='map'></div>
<div id='top-left'>
    <button id='switch'>switch</button>
    <button id='restart'>restart</button>
    steps <input id='stepsRange' type='range' min=1 max=5 value=3 />
    duration <input id='durationRange' type='range' min=500 max=5000 value=3000 />
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJIZmRUQjRBIn0.lRARalfaGHnPdRcc-7QZYQ';

var start = [
    -73.99725437164307,
    40.71934725302753
];

var end = [
  -73.94097089767456,
  40.819119488867344
];

var mapDiv = document.getElementById('map');

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: start,
    zoom: 20
});

document.getElementById('restart').addEventListener('click', () => {
    map.setCenter(start);
    map.setZoom(20);
});

var sample = 0;

function easingFn(steps) {
  return n => {
    let roundedStep = Math.floor(n * steps) / steps;
    let remainder = (n * steps) % 1;
    let curve = (Math.tanh((remainder - 0.5) * 10) + 1) / 2;
    return roundedStep + (curve / (steps));
  };
};

var steps = 3;
var duration = 3000;

document.getElementById('stepsRange').addEventListener('change', (e) => {
  steps = parseInt(e.target.value, 10);
});

document.getElementById('durationRange').addEventListener('change', (e) => {
  duration = parseInt(e.target.value, 10);
});

let runSeries = () => {
  mapDiv.style.transition = 'filter 3000ms ease-in-out';
  mapDiv.style.filter = 'blur(3px) sepia(0.2)';
  map.zoomTo(14, {
      duration: duration,
      easing: easingFn(steps)
  });

setTimeout(() => {
    map.panTo(end, {
        duration: duration,
        easing: easingFn(2)
    });
  }, duration);

setTimeout(() => {
    mapDiv.style.filter = 'blur(0px)';
    map.zoomTo(18, {
        duration: duration,
        easing: easingFn(steps)
    });
  }, duration * 2);
};

document.getElementById('switch')
  .addEventListener('click', runSeries);
</script>

</body>
</html>

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