Text reveal animation

Troughout my career as a product designer I was interested in how to give readers an engaging experience with content they're consuming.

I've built this slow reveal of a long paragraph for a client project using Framer Motion and Tailwind CSS. The trick is to split up the paragraph into a series of revealable elements and reveal them one by one based on the scrolling position on the page.

Notice how the first paragraph is already highlighted from the beginning, to indicate to the user, that there is more to reveal – forcing the scroll.