Experimental On-Scroll Text Animations with SVG Clip-Path

  • Home
  • clip-path
  • Experimental On-Scroll Text Animations with SVG Clip-Path


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!

10 Best WordPress Themes for 2024


Source link

Leave a Reply