Simple Morphing Search

A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search results.

Today we’d like to share a simple morphing effect with you. The idea is to have a search input in the upper right corner of the page and once the input is clicked, the whole search element expands to a fullscreen overlay. The fullscreen overlay has a bigger search input and some elements for showing related items or the search results. Note that we just made a dummy that does not actually search dynamically.

For the morphing search effect we use several transitions that animate the dimensions of the search input, the font size and some other elements. Please note that it’s very experimental and only tested in the latests versions of modern browsers.

The background image used in the demo is from Unsplash and the icons are from Font Awesome.

The search input is located in the top right corner of the page:

MorphingSearch01

When clicking on the input, it will expand to the fullscreen overlay while increasing the font size of the search input and showing some relevant content or search results:

MorphingSearch02

Please note that there are no transitions on the content elements in the fullscreen search in Firefox (latest version 33.0.2/Mac) due to a bug. This bug has to do with changing the overflow of the animated element’s parent. Please read more about it here: Firefox transitions breaking when parent overflow is changed

We hope you enjoyed this little experiment and find it inspiring.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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