<div id="smooth-wrapper">
  <div id="smooth-content">
    
    <div class="boxes">
      <div class="box" data-speed="1.5">unclamped</div>
      <div class="box">ref</div>
      <div class="box" data-speed="clamp(1.5)">clamped</div>
    </div>
    
  </div>
</div>







<div class="middle"></div>

html,
body {
  margin: 0;
}

#smooth-content {
  overflow: visible;
  width: 100%;
  /* set a height because the contents are position: absolute, thus natively there's no height */
  height: 4000px;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.07) 2px,
      transparent 2px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 2px, transparent 2px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

button {
  position: relative;
}

.boxes {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  position: absolute;
  top: 80vh;
  transform: translateY(-50%);
  z-index: 1;
 background: linear-gradient(to right, #ffff, #fff); 
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: center center;
}

.boxes-2 {
  top: 210vh;
}

.box {
  width: 120px;
  height: 100px;
  z-index: 100;
  line-height: 100px;
  font-size: 20px;
  text-align: center;
  will-change: transform;
}
.box-ref {
  top: 80vh;
  left: 100px;
}

.middle {
  position: fixed;
  top: 50%;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: translateY(-50%);
  z-index: -2
}

.refline {
  position: absolute;
  top: 80vh;
  background: var(--blue);
  height: 2px;
  width: 100%;
  z-index: -1;
}

h2 {
  margin: 0;
  position: fixed;
  color: #eee;
  padding: 1em;
  font-weight: normal;
  background: rgb(0, 0, 0, 0.4);
}
.footer {
  min-height: 30vh;
  line-height: 30vh;
  color: white;
  background-color: black;
  text-align: center;
  position: absolute;
  font-size: 60px;
  width: 100%;
  top: calc(4000px - 30vh);
}

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

let smoother = ScrollSmoother.create({
  smooth: 2, 
  effects: true
});