Chronicle - Text Scroll Reveal

chronicle-text-scroll-reveal.markdown

Chronicle - Text Scroll Reveal

A Pen by Vashon Gonzales on CodePen.

License.

index.html

<div class="sc-8teloe-0 fITuWz snipcss-ESVMg">
  <div class="sc-8teloe-1 frggdo">
    <div class="sc-8teloe-2 hOgyUx">NOT EVERYONE MAKES IT IN.</div>
    <div class="sc-8teloe-3 daYEst">
      <span id="style-AllLm" class="style-AllLm">the </span><span id="style-U4VBh" class="style-U4VBh">story </span><span id="style-Cqhq6" class="style-Cqhq6">of </span>
      <span id="style-nl78a" class="style-nl78a">CRED </span><span id="style-ELl3b" class="style-ELl3b">begins </span><span id="style-1mzPv" class="style-1mzPv">with </span>
      <span id="style-nVo9m" class="style-nVo9m">trust. </span><span id="style-cOltt" class="style-cOltt">we </span><span id="style-7oTUY" class="style-7oTUY">believe </span>
      <span id="style-PK92r" class="style-PK92r">individuals </span><span id="style-FgRnx" class="style-FgRnx">who've </span><span id="style-K7WCS" class="style-K7WCS">proven </span>
      <span id="style-iAmkb" class="style-iAmkb">their </span><span id="style-Dy1sB" class="style-Dy1sB">trustworthiness </span><span id="style-ng1An" class="style-ng1An">deserve </span>
      <span id="style-MRHpA" class="style-MRHpA">better: </span><span id="style-jNhBg" class="style-jNhBg">better </span><span id="style-8Kjh5" class="style-8Kjh5">experiences, </span>
      <span id="style-bO6NZ" class="style-bO6NZ">better </span><span id="style-jIH3H" class="style-jIH3H">rewards, </span><span id="style-2Lwm4" class="style-2Lwm4">better </span>
      <span id="style-39H9x" class="style-39H9x">rules. </span><span id="style-KGizP" class="style-KGizP">this </span><span id="style-1JReR" class="style-1JReR">is </span>
      <span id="style-lg9id" class="style-lg9id">the </span><span id="style-Q1frP" class="style-Q1frP">status </span><span id="style-BBS9R" class="style-BBS9R">quo </span>
      <span id="style-8UOo8" class="style-8UOo8">we're </span><span id="style-HEJF7" class="style-HEJF7">building. </span>
      <span>make </span><span>it </span><span>to </span><span>the </span><span>club, </span><span>and </span><span>experience </span><span>the </span><span>ascension </span>
      <span>yourself. </span>
    </div>
  </div>
</div>

script.js

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
});

function raf(time) {
  lenis.raf(time);
  ScrollTrigger.update();
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

let spans = [...document.querySelectorAll("span")];

spans.forEach((span) => {
  let htmlString = "";
  let spanArray = span.textContent.split("");
  for (let i = 0; i < spanArray.length; i++) {
    htmlString += `<span class="word">${
      spanArray[i] === " " ? "&nbsp;" : spanArray[i]
    }</span>`;
  }
  span.innerHTML = htmlString;
});

spans = [...document.querySelectorAll("span .word")];

function revealSpans() {
  for (let i = 0; i < spans.length; i++) {
    if (
      spans[i].parentElement.getBoundingClientRect().top <
      window.innerHeight / 2
    ) {
      spans[i].classList.add("visible");
    }
  }
}

window.addEventListener("scroll", () => {
  revealSpans();
});
revealSpans();

scripts

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

style.css

body {
  font-family: gilroy-regular;
  color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  margin: 0;
  overflow-x: hidden;
}

.fITuWz {
  width: 100vw;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0);
  padding: 0 30px;
}

.frggdo {
  width: 47.7%;
  margin: 200px 0;
  display: flex;
  flex-direction: column;
  white-space: normal;
}

.frggdo > * {
  margin-top: 70px;
}

.hOgyUx {
  font-family: gilroy;
  font-size: 27px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 6px;
  text-align: left;
  color: rgb(255, 255, 255);
  white-space: normal;
}

.daYEst {
  font-family: denton;
  font-size: 70px;
  font-weight: 300;
  line-height: 100px;
  letter-spacing: 1px;
  color: rgb(255, 255, 255);
  text-align: left;
  white-space: normal;
}

.word {
  display: inline-table;
  opacity: 0.2;
  transition: opacity 300ms ease;
}

.visible {
  opacity: 1;
}