<div class="container">
  <div>
    <p>↓scroll↓</p>
  </div>
  <div class="box1">
    <p>scale</p>
  </div>
  <div class="box2">
    <p>scale</p>
  </div>
  <div class="box3">
    <p>top</p>
  </div>
  <div class="box4">
    <p>right</p>
  </div>
  <div class="box5">
    <p>left</p>
  </div>
  <div class="box6">
    <p>bottom</p>
  </div>
</div>
.container {
  max-width: 600px;
  margin: auto;
  background: #1d1d1d;
}

.container div {
  width: 100%;
  height: 80vh;
  text-align: center;
}

.container div p {
  color: #fff;
  font-size: 32px;
  font-weight: bold;
}
ScrollReveal().reveal(".box1", {
  duration: 1500,
  scale: 3,
  reset: true
});

ScrollReveal().reveal(".box2", {
  duration: 1500,
  scale: 0.1,
  reset: true
});

ScrollReveal().reveal(".box3", {
  duration: 1500,
  origin: "top",
  distance: "70px",
  reset: true
});

ScrollReveal().reveal(".box4", {
  duration: 1500,
  origin: "right",
  distance: "70px",
  reset: true
});

ScrollReveal().reveal(".box5", {
  duration: 1500,
  origin: "left",
  distance: "70px",
  reset: true
});

ScrollReveal().reveal(".box6", {
  duration: 1500,
  origin: "bottom",
  distance: "70px",
  reset: true
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.