Fantastic work here, @flemingspace! Really love the way you highlight lines as the user scrolls—how did you achieve that?
One small nit is that, on my screen, one of the app screens covers up a key portion of the first line of copy, throwing off the rest of the experience not insignificantly…
Oh! many thanks for your feedback I’ll make sure to fix that.
In regards to the technique:
Split the whole paragraph into span of selected sentences that will be highlighted together or put every highlight on a separate p.
Create an animation for the section or div surrounding the paragraph, with the while scrolling trigger.
Select the first sentence and set the first state to the low opacity of your choice (20% in my case) and then form the point that the text enters the desired coordinate set opacity to 100%.
After the text runs the percentage scroll of your choice then set opacity to 20% again (to avoid the fading of the reading text due to the motion of the animations I set another 100% opacity animation 1 or 2 scroll percentages behind this one).
Now for the sentence after in the previous 100% opacity of the last sentence insert a 20% opacity for this sentence and in the previous 20% opacity insert the 100% opacity for this sentence (to get a nice cycle effect!).
After that is pretty much repeating the same step and giving whatever percentage of the scroll your sentence takes and setting a cycle there and son and so forth!
Note: There is some tweaking required for the different viewports, but nothing too chaotic.
That’s pretty much it, there could be a better way to do that but that was my first-day using Webflow and the menus were still unknown to me.
The project has cloning enabled so that anyone can clone it and check it out,