A small set of scroll-based SVG filter animations on HTML text.
Sometimes, I forget just how powerful SVG filters can be. Maybe it’s because my mind tries to block out the countless hours I’ve spent wrestling with glitches, performance issues, and other strange browser quirks. But like many aspects of web technology, things have improved a lot! So, when I came across this effect on the stunning EDITORA website, created by MisatoDaiq from Garden Eight, I felt inspired to explore different filter effects triggered by scrolling.
If you would like to learn more about SVG filters and what you can do with them, don’t miss our in-depth SVG filter series by Sara Soueidan!
In the past, when I animated SVG filters, I applied them to SVG text. This time, however, I wanted to try something new by using HTML headings instead. I’m not entirely sure how well this is supported across all browsers, but it’s great to see that Firefox is cooperating (for once).
Check out the demo! I’ve added a button after each heading so you can replay the SVG filter animations and get a closer look.
Hopefully, this will inspire you and serve as a starting point for your own experiments.
Feel free to use the images—they were generated with Midjourney.
If you like these effects, make sure to check out the following two demos: Morphing Gooey Text Hover Effect and Image Distortion Effects with SVG Filters.
Thanks for stopping by, and enjoy!
distortion filter scroll svg typography
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!