I'm currently using this example in my application
https://openlayers.org/en/latest/examples/webgl-layer-swipe.html
which overlays the left side of the map with a lay that you can extend over your base map.
I need this exact functionality however flipped so that the layer that overlays is on the left.
This is the guts of the code that does the slice
this.imagery = this.createCompareLayer()
map.addLayer(this.imagery);
this.imagery.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 = (topRight[0] - bottomLeft[0]) * (Number(swipe.value) / 100);
const height = topRight[1] - bottomLeft[1];
gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
I've tried moving the bottomLeft to the center but I'm not sure this is the right approach.