Design

Experimental On-Scroll Text Animations with SVG Clip-Path

[ad_1]

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!

[ad_2]

Source link

Show More

admin

Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button