Experimental On-Scroll Text Animations with SVG Clip-Path

Some experiments with on-scroll typography effects using SVG clip-paths.

You may have come across those design elements with knockout “text”, revealing an image or pattern behind it. Sometimes, it doesn’t even look like text, but more like shapes:

Or like the one seen on the website of Newfolk.

I find that these elements can really contribute a nice dynamic touch to a design. I wanted to explore this concept further, adding an extra layer of interest with a scrolling animation. This involves moving each letter individually or translating the entire text. It turns out to be fun and a bit frustrating because… SVG. I must admit that I really don’t like working with it when it comes to experiments like this but the results are interesting so I hope you find some joy scrolling through it 🙂

That said, it’s super experimental. It’s somewhat hard-coded in certain parts due to the uniqueness of the fonts and… SVG. Nevertheless, I hope it provides inspiration on the possibilities and visual impact of such effects.

I hope you enjoy this! Thank you for stopping by!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!