Scroll-based SVG Filter Animations on Text

Posted on by

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!