<div class="wrapper">
  <div class="content">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
    <div class="box">Box 9</div>
    <div class="box">Box 10</div>
    <div class="box">Box 11</div>
    <div class="box">Box 12</div>
  </div>
</div>
.wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.content {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 20px;
  margin: 0 auto;
}

.box {
  width: 100%;
  height: 400px;
  background-color: teal;
  color: white;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
View Compiled
console.clear();

const content = document.querySelector(".content");
const boxes = gsap.utils.toArray(".box");
const _height = window.innerHeight;

const t = gsap
  .to(content, {
    y: _height - content.scrollHeight,
    duration: boxes.length,
    ease: "none"
  })
  .timeScale(0);
const speed = 0.01;
window.addEventListener("mousemove", (e) =>
  t.timeScale((e.clientY - _height / 2) * speed)
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/gsap@3/dist/gsap.min.js