text highlighted when scroll scrollTrigger

[Nora]

Hello, I'm trying to make text highlighted when scroll, every time when I click down arrow key the next text is highlighted

I provide demo code but it's not fully work, some line I have to press the key twice instead of one 

See the Pen gOjVQPB by nora10 (@nora10) on CodePen

[GreenSock]

If I understand you correctly, that's because every down arrow scrolls the window by a particular amount (probably different in various browsers/platforms) but you're assuming every time it'd cross the boundary into the next ScrollTrigger but that's not a valid assumption. Imagine your text is 35px apart (each one) but the window scrolls 30px each time. It will indeed cross the threshold on the first several, but at some point it'll take two scrolls to get into the next one (imagine it lands on 210 which is on the 6th text blurb, but then the next scroll it lands on 240 which is ALSO on the 6th blurb). 

 

So it's a logic thing. If you want it to reliably go to the next text blurb on each arrow press, you should probably set up an event handler and call .preventDefault() on the event and handle the scrolling manually so that you make sure you set the scroll position to the next ScrollTrigger's start value. 

 

I hope that helps.