<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 => {
const anim = gsap.to(box, { x: 300, paused: true });
ScrollTrigger.create({
trigger: box,
start: "center 70%",
onEnter: () => anim.play()
});
ScrollTrigger.create({
trigger: box,
start: "top bottom",
onLeaveBack: () => anim.pause(0)
});
});
This Pen doesn't use any external CSS resources.