<div class="compare">
  <section class="before">
    <img src="https://assets.codepen.io/2585/Runner.svg" alt="" />
  </section>
  <section class="after">
    <img src="https://assets.codepen.io/2585/Roboto.svg" alt="" />
  </section>
  <input type="range" id="range">
</div> 

<p style="position: absolute;bottom: 0;left: 0;z-index: 1;">Forked from <a href="https://codepen.io/argyleink/pen/XWOaazZ">https://codepen.io/argyleink/pen/XWOaazZ</a> by Adam Argyle</p>

@layer demo {
  .compare {
    display: grid;
    timeline-scope: --pos;

    > * {
      grid-area: 1 / 1;
    }
    
    > section {
      display: grid;
      place-content: center;
    }
  }
  
  @supports (timeline-scope: --foo) {
    .compare {
      animation: --pos linear reverse both;
      animation-timeline: --pos;
      animation-range: contain;
    }
  }

  @property --pos {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: true;
  }
  
  @keyframes --pos {
    from {
      --pos: 0%;
    }
    to {
      --pos: 100%;
    }
  }

  
  .before {
    mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
  }
  
  .after {
    mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
  }
  
  input[type="range"] {
    z-index: 1;
    appearance: none;
    background: transparent;
    cursor: pointer;
    
    &::-webkit-slider-thumb {
      appearance: none;
      width: 4px;
      height: 100dvh;
      background-color: CanvasText;
      view-timeline: --pos inline;
    } 
    
    &::-moz-range-thumb {
      appearance: none;
      width: 4px;
      height: 100dvh;
      background-color: CanvasText;
    }
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
  }
  
  img {
    max-block-size: 80dvh;
    max-inline-size: 100%;
  }
}

body::after {
  content: "Using JS; try in Chrome";
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

@supports (timeline-scope: --foo) {
  body::after {
    content: "Using Scroll-driven animations";
  }  
}

if (!CSS.supports('timeline-scope', '--foo')) {
  range.oninput = () =>
  document.body.style.setProperty('--pos', range.value + '%')
}