Lopdog's post in Use Scroll Trigger to split text on page scroll with different background colors was marked as the answer
Figured it out. Below is for anyone who wants any text to animate, regardless of color.
gsap.registerPlugin(ScrollTrigger);
const splitTypes = document.querySelectorAll('.text-split');
splitTypes.forEach((char,i) => {
const text = new SplitType(char, {types: ['chars','words']});
gsap.from(text.chars, {
scrollTrigger: {
trigger: char,
start: 'top 80%',
end: 'top 20%',
scrub: true,
markers: false
},
opacity: 0.2,
stagger: 0.1,
})
});
