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.

Morphing Search

View demo Download source

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.

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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.

Feedback 44

Comments are closed.
    • 3

      Hi Eugene, that’s not a bug but a defined style. This will avoid a “jump” (in Windows) when opening the overlay which has overflowing content. Thx, cheers, ML

  1. 5

    While I really love your design concepts, this one is more disturbing for me than useful.

  2. 8

    Thank you !!!
    I also want to learn how to create such an interesting and interactive …
    Please tell me where this teach? )))

  3. 11

    Looks like issue at the vertical scroll-bar has been resolved. This is enforcing ideas to a new concept. Maybe a little transparency or covering a portion of the page would make it more tolerable. Great job again Mary Lou!

  4. 13

    I’ve been following your site for quite a while. Everything you post is awesome, but this one..it’s my favorite! I look forward to seeing what you come up with next :-)

  5. 14

    Beautiful! Although I personally would not completely fill the window with modal screen. Users are suddenly thrown into a complete new interface and are not directly clear on how to leave the window.

  6. 18

    Hey ,Mary i am trying to use more than one elements from your website , like dropboxes , vertical pannels split layouts etc , but the problem is i am not able to integrate them into one file , your each code consists of demo.css , normalize.css and many other their are always many class name conflicts in classes , i am not a champ in designing but really want those cool effects in my college project , is their any way you can help me or is thier a possibility to use diffrent style sheets for a particular divs so that i could use them in my project …
    waiting for your reply eagerly..:)

  7. 21

    Could someone help me with linking this to a database search. Is this fine

    $(function() {

    $(“.search_button”).click(function() {
    // getting the value that user typed
    var searchString = $(“#search_box”).val();
    // forming the queryString
    var data = ‘search=’+ searchString;

    // if searchString is not empty
    if(searchString) {
    // ajax call
    $.ajax({
    type: “POST”,
    url: “do_search.php”,
    data: data,
    beforeSend: function(html) { // this happens before actual call
    $(“#results”).html(”);
    $(“#searchresults”).show();
    $(“.word”).html(searchString);
    },
    success: function(html){ // this happens after we get results
    $(“#results”).show();
    $(“#results”).append(html);
    }
    });
    }
    return false;
    });
    });

Comments are closed.