Sticky Title Scroll Effect

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>

<!-- SplitText is a paid plugin – you do NOT have permission to use this link below in your projects. -->
<!-- Please become a Club Member using our discount code above and host your own files --> 
<script src="https://cdn.jsdelivr.net/gh/ilja-van-eck/osmo/assets/gsap/SplitText.min.js"></script>

<section data-sticky-title="wrap" class="sticky-title-wrapper">
  <div class="sticky-title-container">
    <div class="sticky-title-inner">
      <h2 data-sticky-title="heading" class="sticky-title-el">Use this effect to really emphasize your message</h2>
      <h2 data-sticky-title="heading" class="sticky-title-el is--stacked">You can layer multiple headings on each other</h2>
      <h2 data-sticky-title="heading" class="sticky-title-el is--stacked">Add as many as you want, but I like the balance of 3</h2>
    </div>
  </div>
</section>

.sticky-title-wrapper {
  background-image: linear-gradient(#000, #777);
  width: 100%;
  height: 350vh;
  position: relative;
}

.sticky-title-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding-left: 1.5em;
  padding-right: 1.5em;
  display: flex;
  position: sticky;
  top: 0;
}

.sticky-title-inner {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.sticky-title-el {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5em;
  font-weight: 500;
  line-height: 1;
}

.sticky-title-el.is--stacked {
  visibility: hidden;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .sticky-title-el {
    font-size: 3.5em;
  }
}

gsap.registerPlugin(ScrollTrigger, SplitText)

function initStickyTitleScroll() {
  const wraps = document.querySelectorAll('[data-sticky-title="wrap"]');
  
  wraps.forEach(wrap => {
    const headings = Array.from(wrap.querySelectorAll('[data-sticky-title="heading"]'));
    
    const masterTl = gsap.timeline({
      scrollTrigger: {
        trigger: wrap,
        start: "top 40%",
        end: "bottom bottom",
        scrub: true,
      }
    });
    
    const revealDuration = 0.7,
          fadeOutDuration = 0.7,
          overlapOffset = 0.15;
    
    headings.forEach((heading, index) => {
      // Save original heading content for screen readers
      heading.setAttribute("aria-label", heading.textContent);
      
      const split = new SplitText(heading, { type: "words,chars" });
      
      // Hide all the separate words from screenreader
      split.words.forEach(word => word.setAttribute("aria-hidden", "true"));
      
      // Reset visibility on the 'stacked' headings
      gsap.set(heading, { visibility: "visible" });
      
      const headingTl = gsap.timeline();
      headingTl.from(split.chars, {
        autoAlpha: 0,
        stagger: { amount: revealDuration, from: "start" },
        duration: revealDuration
      });
      
      // Animate fade-out for every heading except the last one.
      if (index < headings.length - 1) {
        headingTl.to(split.chars, {
          autoAlpha: 0,
          stagger: { amount: fadeOutDuration, from: "end" },
          duration: fadeOutDuration
        });
      }
      
      // Overlap the start of fade-in of the new heading a little bit
      if (index === 0) {
        masterTl.add(headingTl);
      } else {
        masterTl.add(headingTl, `-=${overlapOffset}`);
      }
    });
  });
}

document.addEventListener("DOMContentLoaded", () => {
  initStickyTitleScroll();
})