From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Let me know what you come up with and ping me @codrops or @crnacura!
