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
Create an animation for the
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
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,
Thanks for reaching out!