<section id="sectionEffect">
  <h1>
    <span>חודש</span>
    <span>שבט</span>
    <span>מבורך</span>
  </h1>
</section>
  <script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/TextPlugin.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js'></script>
<script>
const arr1 = ["00e2c5","3d62ae","3ac7f3"]
const arr2 = [...arr1]
const words2 = ["ראש","השנה","לאילנות"]
const spans = document.querySelectorAll('h1 span')
const getHexFrom = (arr) => arr.splice( gsap.utils.random(0 ,arr.length-1, 1), 1)

const tle = gsap.timeline({
  defaults:{ ease:'none' },
  scrollTrigger:{
    trigger:'#sectionEffect',
    scrub:true,
  }
})

spans.forEach((span,i)=>{
  gsap.set(span,{'--bge':'#'+getHexFrom(arr1)})

  tle.add( gsap.to(span, { text:words2[i] , delay:3}), i)
  tle.add( gsap.to(span, { '--bge':'#'+getHexFrom(arr2), duration:0.15 }), i)
})
</script>
<style>
#sectionEffect {
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: none;
  direction: ltr;
}

#sectionEffect h1 {
  width:32vw;
}

#sectionEffect h1 span {
  display:block;
  font-size:7vw;
  position:relative;
  margin-bottom:3vw;
  padding:0 1vw;
  width: fit-content;
  --bg:transparent;
  z-index: 0;
}

#sectionEffect h1 span:after {
  z-index:-1;
  border-radius:1vw;
  content: "";
  width:100%;
  height:33%;
  left:0;
  bottom:0;
  position: absolute;
  background:var(--bge);
}
</style>