From our sponsor: Leverage AI for dynamic, custom website builds with ease.
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!
