iDevie
October 2020
M T W T F S S
« Sep    
 1234
567891011
12131415161718
19202122232425
262728293031  

Categories


Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.

GooeyMenu_featured

From our sponsor: Divi gives you the power to create spectacular designs with ease.

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!


Comments 0
There are currently no comments.