Traté de animar cada palabra en un párrafo, así que las separo con js. Dado que tengo mucho contenido antes de esa parte, la animación se completará cuando me desplace hacia abajo hasta esa parte. Así que quería que se activara cuando me desplazara hacia abajo, para esto usé Scrolltrigger de GSAP.

La animación de palabras funciona bien, pero no pude activarla cuando me desplacé hacia abajo. Por favor, hágame saber cómo puedo solucionar esto.

Aquí está mi HTML

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

Mi CSS relevante

 .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 para separar palabras

 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';}

Y GSAP Scrolltrigger JS (traté de activarlo con .char, pero no funciona)

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