The other day I revisited this awesome demo of a gooey countdown using SVG filters. The demo by Graham Pyne shows a morphing text effect where one number morphs into another. I wanted to integrate this in a menu and see how variations on the filter would look like for a hover effect.
Combining the morphing with some filter adjustments and other animations (like on translations), make this a playground for endless possibilities. I’m sharing three simple ideas with you, hope these give you a starting point for your own experiments!
If you want to understand the underlying gooey filter effect, Lucas Bebber explains it really well in this article. He also made a fantastic set of demos a couple of years ago that show how this gooey effect can be used in several scenarios.
Let me know what you come up with and ping me @codrops or @crnacura!
Morphing Gooey Text Hover Effect was written by Mary Lou and published on Codrops.