in Playground

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.

Find this project on Github

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

GridRevealEffects_featured

Grid Reveal Effects with Anime.js

TextDistortionEffects_featured

Text Distortion Effects using Blotter.js

LayerMotionSlideshow_featured

Layer Motion Slideshow

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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.
  2. 2

    This is what I like.. flexible to use if you have something to search it can morph into a fullscreen.

  3. 3

    It looks like a concept from Windows 8 dynamic search. But I must say that from the design perspective it is much, much better. Nicely done 🙂

  4. 4

    Hi Mary,
    There is no doubt is’t a very good front-end element for Web designers 🙂
    But i notice one thing we can’t use it twice in one page .
    Example: if i customize it and create an wordpress widget then it’s not work in more then one widget area
    So is there any way to fix it.!!
    Many thanks for this POST

  6. 8

    Hello Mary!

    This is Awesome!

    It’s possible use this plugin inside of the container 960px position:relative? I try but he only open to 960px.

    You can help?

    Thanks!

  9. 12

    Would be cool to have this done for WordPress, thanks for any ideas how to realize that in advance.

  11. 16

    To everyone asking about WordPress—it’s simple: just apply the styles and scripts to your markup as you would on a static HTML site. The only difference is that you’ll want to use the WordPress search form like so:


    <form class="morphsearch-form" role="search" method="get" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
    <input class="morphsearch-input" type="search" placeholder="Search" name="s" id="s" />
    <input class="morphsearch-submit" type="submit" id="searchsubmit" value="Search" />
    </div>
    </form>

    • 17

      Hello @Cameron

      Not at all !
      Apllying original scripts and styles and calling the default WP search form will not do the trick at all ! Did you try to do it ?
      You can take a look how I’ve done it
      https://wordpress.org/plugins/full-screen-morphing-search/
      Some CSS rules are added other slightly modified and some other removed !
      The JS is not the same at all, I’ve even removed all the JS here !

      SYA 🙂

  12. 18

    Really cool stuff ! Does anyone knows how to “launch” the search using a button ?
    I want to launch the “bigger” search screen using a button without having to display the “smaller” search input box !

    Thanks in advance for any help !

  15. 21

    trying to get this to work with jquery’s autocomplete (with jQuery UI) and having some problems. any insight? is it because it is hidden initially?

Comments are closed.