Text Fade in/out on scroll

Hi,

I'm hoping to implement this Codepen onto my website in the section below my hero, to reveal fade in/out this description. Follow up question is, does mobile affect it at all?

codepen: https://codepen.io/gusevdigital/pen/dygLbqJ

my site: https://www.grahamcerceo.com

Thanks SS Superstars!

Try edit page where you want to apply this > Add a Block > Choose Code > Paste this code

<div class="app">
  <section>
    <div class="container">
      <p class="reveal">In the vastness of space, celestial bodies dance in harmony. Stars twinkle, planets orbit, and nebulas paint vibrant hues. Black holes exert their gravitational might, while comets streak by, leaving stardust in their wake.</p>
    </div>
  </section>
</div>
<style>
  .lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.app .container {
  position: relative;
  max-width: 90%;
  margin: 0 auto;
}

.reveal {
  font-kerning: none;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.4;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
let revealAnimations = [];

// Scroll
const lenis = new Lenis({
  lerp: 0.07
});

lenis.on('scroll', ScrollTrigger.update)
gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

// Reveal
document.querySelectorAll('.reveal').forEach(text => {
  // Split text
  let splitText = new SplitType(text, {
    type: 'words'
  })

  // Animation
  const section = text.closest('section');
  gsap.from(splitText.words, {
    opacity: 0,
    ease: 'none',
    stagger: 1,
    duration: 5,
    scrollTrigger: {
      trigger: section,
      start: 'top top', 
      end: () => `+=${window.innerHeight * 5}px`,
      scrub: true,
      // markers: true,
      pin: true,
    }
  })
})





</script>

This is great, thank you! Need to do some tweaking to make it work.

How can we keep the code box from being so long and making the section so long, after inputting all that code into it? And, I'd like to make the text my H2 size.

O, just realized the effect is not fading in or out with the scroll up or down the page. The page is smooth scrolling though, and that's nice.

The effect I'm going for is more like a status bar scroll, with the copy fading in/out when the viewport reaches that section. Does that make sense?

And it's all screwed up on mobile, I'll need to add a parameter for it to resize the copy for the mobile version.

https://www.grahamcerceo.com/

@tuanphan circling back on this scrolling/fade effect seen here >>

www.grahamcerceo.com

I would like to do simple scroll reveal for content within my homepage.  Is there a standard CSS for this? 

Evergracechurch.com