Morphing Gooey Text Hover Effect

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

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

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!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.