<h2>Scroll down</h2>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body {
font-family: "Signika Negative", sans-serif;
font-weight: 300;
margin: 0;
padding: 0 20px;
}
h2, .box {
margin-bottom: 100vh;
}
h2 {
text-align: center;
}
.box {
background-color: green;
width: 100px;
height: 100px;
}
const boxes = gsap.utils.toArray('.box');
boxes.forEach(box => {
gsap.to(box, {
x: 300,
scrollTrigger: {
trigger: box,
scrub: true
}
})
});
This Pen doesn't use any external CSS resources.