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!
