<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
This Pen doesn't use any external CSS resources.