<div class="gwd-play-animation gwd-page-wrapper gwd-page-size gwd-lightbox gwd-page-1ci8">
  <div class="gwd-page-content gwd-page-size gwd-div-1awa">
    <div class="gwd-p-g8cc" style="letter-spacing: 2.1px;">SCROLL<br>
    </div>
    <svg data-gwd-shape="line" preserveAspectRatio="none" viewBox="0 0 1 34.4" class="gwd-line-sc57">
      <line x1="0.5" x2="0.5" y1="0" y2="34.4"></line>
    </svg>
    <svg data-gwd-shape="line" preserveAspectRatio="none" viewBox="0 0 1 77" class="gwd-line-rdlw gwd-gen-fxpigwdanimation">
      <line x1="0.5" x2="0.5" y1="0" y2="77"></line>
    </svg>
    <svg data-gwd-shape="line" preserveAspectRatio="none" viewBox="0 0 14.116 12.746" class="gwd-line-1v1v gwd-gen-tt6ogwdanimation">
      <line x1="0.333" x2="13.783" y1="12.373" y2="0.373"></line>
    </svg>
  </div>
</div>
.gwd-page-content {
  background-color: transparent;
  transform: perspective(1400px)
    matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform-style: preserve-3d;
  position: absolute;
}

.gwd-page-size {
  width: 300px;
  height: 250px;
}
.gwd-div-1awa {
  width: 74px;
  height: 120px;
}
.gwd-page-1ci8 {
  width: 74px;
  height: 120px;
  background-image: none;
}
.gwd-p-g8cc {
  position: absolute;
  left: 4px;
  font-family: "Noto Serif";
  background-image: none;
  background-color: transparent;
  border-image-source: none;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-color: rgb(54, 125, 183);
  color: rgb(115, 135, 152);
  width: 67px;
  height: 22px;
  transform-origin: 50% 50% 0px;
  text-align: left;
  padding-left: 0px;
  font-size: 15px;
  top: 0px;
}
.gwd-line-sc57 {
  position: absolute;
  width: 1px;
  height: 34.4px;
  stroke-width: 1px;
  stroke: rgb(115, 135, 152);
  top: 30px;
  left: 33px;
}
.gwd-line-rdlw {
  position: absolute;
  width: 1px;
  height: 60px;
  stroke-width: 1px;
  stroke: rgb(115, 135, 152);
  top: 30px;
  left: 39px;
  transform: translate3d(0px, 0px, 0px);
}
.gwd-line-1v1v {
  position: absolute;
  width: 14.116px;
  height: 12.746px;
  stroke-width: 1px;
  stroke: rgb(115, 135, 152);
  left: 39px;
  top: 77px;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 0px);
}
@keyframes gwd-gen-fxpigwdanimation_gwd-keyframes {
  0% {
    transform: translate3d(0px, 0px, 0px);
    height: 60px;
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    height: 77px;
    animation-timing-function: linear;
  }
}
.gwd-play-animation .gwd-gen-fxpigwdanimation {
  animation: 2s linear 0s infinite normal forwards running
    gwd-gen-fxpigwdanimation_gwd-keyframes;
}
@keyframes gwd-gen-tt6ogwdanimation_gwd-keyframes {
  0% {
    transform: translate3d(0px, 0px, 0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(0px, 17px, 0px);
    animation-timing-function: linear;
  }
}
.gwd-play-animation .gwd-gen-tt6ogwdanimation {
  animation: 2s linear 0s infinite normal forwards running
    gwd-gen-tt6ogwdanimation_gwd-keyframes;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.