ScrollTriger reveal text color with splitText

[balocreation]

Hello, I want to reveal the text colour with split text on scroll with scroll trigger just like the one on https://www.bequant.com/. I can split the text but I don't get the reveal. Thanks in advance.

See the Pen QWmpKrV by olawale-balo (@olawale-balo) on CodePen

[GreenSock]

If I understand your goal correctly, you would need to create two copies of that text - one that stays put and then another that you would animate in directly on top of that text. 

[balocreation]

Please help me with the code snippet, I've tried all my possible best, I don't get it.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[balocreation]

Thanks, I have fixed it.

 

const createSplits = () => {

Array.from(document.querySelectorAll(".section-heading")).forEach(el => {

if(el.motion) {

el.motion.progress(1).kill();

el.split.revert();

}

el.split = new SplitText(el, {

type: "lines,words,chars",

linesClass: "split-lines"

});

el.motion = gsap.from(el.split.chars, {

scrollTrigger: {

trigger: el,

toggleActions: "restart pause resume reverse",

start: "top 100%",

end: "bottom top"

},

y: "0%",

opacity: 0.2,

duration: 0.02,

rotationX: -0,

ease: "none",

stagger: {

amount: 0.8,

from: "start"

}

});

});

}

ScrollTrigger.addEventListener("refresh", createSplits);

createSplits();