How can I use OpenLayers Swipe with VectorLayer

Question

Currently I'm tasked with comparing Vector objects as they've changed over time based on the year a user selects.

I've been using Open Layers Swipe as a guide https://openlayers.org/en/latest/examples/webgl-layer-swipe.html

I just realized this is using a special WebGL Tile Layer when I tried to apply it to the Vector Layer I want to compare.

How can I accomplish the same functionality with a Vector Layer?

My code is something like this

compareLayer:olLayerVector<olSourceVector<Geometry>>


 compareFieldVectorSource = new olSourceVector({
        features: featureCollection
      });


 

compareLayer = new olLayerVector();
      compareLayer.set('title', 'SomeTile');
      compareLayer.set('name', 'someName');
      compareLayer.set('source', compareFieldVectorSource);
    }


map.addLayer(compareLayer);



compareLayer.on('prerender', function (event) {
      const gl = <WebGLRenderingContext> event.context;
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.enable(gl.SCISSOR_TEST);

      const mapSize = map.getSize(); // [width, height] in CSS pixels

     // get render coordinates and dimensions given CSS coordinates
      const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
      const topRight = getRenderPixel(event, [mapSize[0], 0]);

      const width = Math.round((topRight[0] - bottomLeft[0]) * (1 -     Number(swipe.value) / 100));
      const height = topRight[1] - bottomLeft[1];
      gl.scissor(topRight[0] - width, bottomLeft[1], width, height);

    });
    compareLayer.on('postrender', function (event) {
      const gl = <WebGLRenderingContext> event.context;
      gl.disable(gl.SCISSOR_TEST);
    });
    const listener = function () {
      map.render();
    };
    swipe.addEventListener('input', listener);
    swipe.addEventListener('change', listener);