Changing text color on scroll

[Kinka]

Hi! I'm struggling a bit with changing color for text in each line, but I see a 'lag' on previous lines when I'm scrolling the page down (last letters of 2-3 previous lines are changing their color too late). I also tried this code before:

gsap.timeline({
  scrollTrigger: {
    trigger: ".sectionAbout",
    start: "top center",
    end: "+=150%",
    scrub: 0.75,
    markers: true,
  }
}).set(description.chars, {
  color: "#fcfcfc",
  stagger: 0.1
}, 0.1)

but it doesnt always work correctly on mobile when text is suuuuper long and screen width is for example set to 380px.


My code:


Also I was thinking about 'filling' my letters with color like here: 

Thank you for any advices!
 

See the Pen ogbwxNx by krulikk (@krulikk) on CodePen.

[Rodrigo]

Hi,

 

Perhaps try using a linear ease and a smaller scrub value, maybe something like this:

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

 

Hopefully this helps

Happy Tweening!

[Kinka]

Thank you for answering. Changing scrub value sadly didnt help, I still see this 'lag'. I decided to use solution from this topic (with using backgroundPositionX):