This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### WMTS Tile Transitions

wmts 7 parameter 1 transition 3 grid 8

#####

Sea-level

Example of smooth tile transitions when changing the dimension of a WMTS layer.

Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from SCALGO, underlying data from CGIAR-CSI SRTM) where cells that are flooded if the sea-level rises to more than x m are colored blue. The user selects the sea-level dimension using a slider.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import {getTopLeft, getWidth} from 'ol/extent.js';
    import TileLayer from 'ol/layer/Tile.js';
    import {get as getProjection} from 'ol/proj.js';
    import OSM from 'ol/source/OSM.js';
    import WMTS from 'ol/source/WMTS.js';
    import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

    // create the WMTS tile grid in the google projection
    const projection = getProjection('EPSG:3857');
    const tileSizePixels = 256;
    const tileSizeMtrs = getWidth(projection.getExtent()) / tileSizePixels;
    const matrixIds = [];
    const resolutions = [];
    for (let i = 0; i <= 14; i++) {
      matrixIds[i] = String(i);
      resolutions[i] = tileSizeMtrs / Math.pow(2, i);
    }
    const tileGrid = new WMTSTileGrid({
      origin: getTopLeft(projection.getExtent()),
      resolutions: resolutions,
      matrixIds: matrixIds,
    });

    const scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';

    const wmtsSource = new WMTS({
      url: 'https://ts2.scalgo.com/olpatch/wmts?token=' + scalgoToken,
      layer: 'SRTM_4_1:SRTM_4_1_flooded_sealevels',
      format: 'image/png',
      matrixSet: 'EPSG:3857',
      attributions: [
        '<a href="https://scalgo.com" target="_blank">SCALGO</a>',
        '<a href="https://cgiarcsi.community/data/' +
          'srtm-90m-digital-elevation-database-v4-1"' +
          ' target="_blank">CGIAR-CSI SRTM</a>',
      ],
      tileGrid: tileGrid,
      style: 'default',
      dimensions: {
        'threshold': 100,
      },
    });

    const map = new Map({
      target: 'map',
      view: new View({
        projection: projection,
        center: [-9871995, 3566245],
        zoom: 6,
      }),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        new TileLayer({
          opacity: 0.5,
          source: wmtsSource,
        }),
      ],
    });

    const slider = document.getElementById('slider');
    const updateSourceDimension = function () {
      wmtsSource.updateDimensions({'threshold': slider.value});
      document.getElementById('theinfo').innerHTML = slider.value + ' meters';
    };
    slider.addEventListener('input', updateSourceDimension);
    updateSourceDimension();

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>WMTS Tile Transitions</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <label>
          Sea-level
          <input id="slider" type="range" value="10" max="100" min="-1">
        </label>
        <span id="theinfo"></span>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "wmts-dimensions",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }