Combining the demo Typewriter effect with ScrollTrigger

[Detrol]

Hey!

 

So i love the demo typewriter, as in the one found here

 

But, how can i combine it with scrolltrigger, so it will start "typing" when i scroll down to that section, and not as soon as i load the page?

 

Thank you in advance!

See the Pen RwBwJBm by GreenSock (@GreenSock) on CodePen.

[Detrol]

I got it sorted after some sleep. Wasn't so difficult, just a tired brain.

const myTextElement = document.getElementsByClassName("jag-decoy");
const timePerCharacter = 0.02;

gsap.to(".jag", {
    scrollTrigger: {
        trigger: ".jag",
        toggleActions: "play",
        start: "top 90%",
        end: "bottom 50%+=100px",
    },
    text: {
        value: myTextElement[0].innerHTML
    },
    duration: myTextElement[0].innerText.length * timePerCharacter,
    delay: 0.5,
    ease: "none",
    delimiter: " "
})