<div class="nav">
<label><input type="checkbox" name="overflow" id="overflow" value="1" /> Show overflow</label>
</div>
<div class="wrapper">
  <div class="boxes">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
</div>
</div>

.wrapper{
  width:450px;
  height:50px;
  position:relative;
  margin:auto;
  background:#ccc;
  overflow:hidden;
}

.wrapper::after {
  width:448px;
  height:48px;
  content:"";
  position:absolute;
  border:solid 1px white;
}

.box{
  width:50px;
  height:50px;
  position:absolute;
  background:red;
  font-size:25px;
  line-height:50px;
  text-align:center;
  color: var(--color-just-black);
  
}



.boxes {
  position:relative;
  left:-50px;
}

.nav {
  position:relative;
  text-align:center;
 
  color:white;
  font-size:20px;
  margin:20px 0;
}

var colors = ["#0ae448","#ff8709", "#9d95ff", "#00bae2"];

//initially colorize each box and position in a row
gsap.set(".box", {
  backgroundColor: (i) => colors[i % colors.length],
  x: (i) => i * 50
});


gsap.to(".box", {
  duration: 5,
  ease: "none",
  x: "+=500", //move each box 500px to right
  modifiers: {
    x: gsap.utils.unitize(x => parseFloat(x) % 500) //force x value to be between 0 and 500 using modulus
  },
  repeat: -1
});


//toggle overflow
const overflow = document.querySelector("#overflow");
overflow.addEventListener("change", applyOverflow);

function applyOverflow() {
  if(overflow.checked) {
    gsap.set(".wrapper", {overflow: "visible"});
  } else {
    gsap.set(".wrapper", {overflow: "hidden"});
  }
}