JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<div class="container" id="container">
  <div class="child" id="child">
    <div class="columns">1</div>
    <div class="columns">2</div>
    <div class="columns">3</div>
    <div class="columns">4</div>
    <div class="columns">5</div>
    <div class="columns">6</div>
    <div class="columns">7</div>
    <div class="columns">8</div>
    <div class="columns">9</div>
    <div class="columns">10</div>
    <div class="columns">11</div>
    <div class="columns">12</div>
    <div class="columns">13</div>
    <div class="columns">14</div>
    <div class="columns">15</div>
    <div class="columns">16</div>
    <div class="columns">17</div>
    <div class="columns">18</div>
    <div class="columns">19</div>
    <div class="columns">20</div>
  </div>
</div>

CSS

.container {
  background: cyan;
  width: 100%;
  overflow: scroll;
}

.child {
  width: 2000px;
  background: #CCC;
  display: flex;
}

.columns {
  background: rgba(255,0,255, .6);  
  height: 500px;
  width: 100px;
  border: 2px #000;
  border-style: solid solid none none;
}

JavaScript

var start = null;
var elem = document.getElementById('container');

elem.scrollLeft = 0;

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
	elem.scrollLeft = Math.min(progress / 1, 300);
  if (progress < 400) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);