I tried to animate each word in a paragraph, so I separate them with js. Since I have a lot of content before that part, the animation would be done when I scroll down to that part. So I wanted to have it trigger when I scroll down, for this, I used Scrolltrigger from GSAP.

Words animation works just fine, but I couldn't bring it to trigger when I scroll down. Please let me know how I can fix this.

Here is my HTML

<div id="rap-box">
    <p id="rap-text">very long paragraph sample</p>
</div>

My relevant CSS

.char{
  font-size: 6rem;
  line-height: .5;
  height: 40px;
  animation: rap 1s ease-out 1 both;
  animation-delay: 10s;
  display: inline-block;
}


@keyframes rap{
  from{
      opacity: 0;
      transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
  }
  to{
      opacity: 1;
      transform: perspective(500px) translate3d(0, 0, 0);
  }
}

JS to separate words

var text = document.getElementById('rap-text');
        var newDom = '';
        var animationDelay = 10;
    
        for(let i = 0; i < text.innerText.length; i++)
        {newDom += '<span class="char">' + (text.innerText[i] == ' ' ? '&nbsp;' : text.innerText[i])+ '</span>';}
    
        text.innerHTML = newDom;
        var length = text.children.length;
    
        for(let i = 0; i < length; i++)
        {text.children[i].style['animation-delay'] = animationDelay * i + 'ms';}

And GSAP Scrolltrigger JS (I tried to trigger it with .char, but it doesn't work)

gsap.registerPlugin(ScrollTrigger);
let st = ScrollTrigger.create({
    trigger: "#rap-text",
    start: "top 20%",
    end: "bottom 0%",
    onUpdate: self => {
        console.log("progress:0", self.progress);
    }
  });