Home / Frontend Codes and Demos / CSS Code Demos / Search field animation on enter
Search field animation on enter

Search input field animation developed using scss, html and javascript. Demo and download are available.

Search field animation on enter

Search field animation on enter

Search input field animation developed using scss, html and javascript. Demo and download are available.

Demo Download

Author Aaron Iker
Hits
Created SEPTEMBER 16, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<div>     <div class="search">         <div class="bar">             <div class="icon">                 <i></i>             </div>         </div>         <form>             <input type="text">         </form>         <div class="close"></div>         <ul>             <li>                 <a href="https://dribbble.com/Gavingao" target="_blank">                     <img src="https://cdn.dribbble.com/assets/dribbble-ball-icon-e94956d5f010d19607348176b0ae90def55d61871a43cb4bcb6d771d8d235471.svg">                     <h5>Gale G. on Dribbble</h5>                     <p>Check out his awesome works</p>                     <span>https://dribbble.com/Gavingao</span>                 </a>             </li>             <li>                 <a href="http://www.queblesolutions.com/" target="_blank">                     <img class="queble" src="https://cdn.dribbble.com/users/1763851/avatars/normal/0e0aa5c6da81f17d43efa9c92c76a70d.png">                     <h5>Queblesolutions</h5>                     <p>Digital Product Design Studio</p>                     <span>http://www.queblesolutions.com</span>                 </a>             </li>         </ul>     </div>      <em>Type a kind word and hit <strong>Enter</strong></em>      </div>  <!-- dribbble --> <a class="dribbble" href="https://dribbble.com/shots/5282901-Search-field-animation-v2" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

SCSS Code

$primary: #5628EE; $primaryLight: #8C6FF0;  .search {     background: #fff;     padding: 12px 16px 12px 48px;     position: relative;     display: table;     margin: auto;     border-radius: 8px;     box-shadow: 0 4px 16px -1px rgba(#121621, .3);     transition: background .1s ease, transform .1s ease, padding .5s ease .1s;     .bar {         position: absolute;         left: 16px;         top: 15px;         width: 32px;         height: 32px;         overflow: hidden;         span {             display: block;             color: #fff;             position: absolute;             left: 12px;             top: 0;             line-height: 32px;             font-weight: 500;             font-size: 16px;             opacity: 0;             right: 16px;             overflow: hidden;             white-space: nowrap;         }         &:before {             content: '';             position: absolute;             display: block;             left: 0;             top: 0;             bottom: 0;             right: 16px;             border-radius: 16px 0 0 16px;             background: $primary;             opacity: 0;         }         .icon {             flex: 0 0 32px;             width: 32px;             height: 32px;             background: $primary;             border-radius: 50%;             position: absolute;             z-index: 1;             top: 0;             right: 0;             transform-style: preserve-3d;             transform-origin: 0 0;             transform: scale(.8);             transition: transform .4s ease 0s, background .1s ease;             &:before,             &:after {                 content: '';                 display: block;                 position: absolute;                 backface-visibility: hidden;                 border-radius: 50%;             }             &:before {                 background: #fff;                 left: 4px;                 top: 4px;                 right: 4px;                 bottom: 4px;                 z-index: 2;                 transform: rotateY(0deg);                 transition: background .1s ease;             }             &:after {                 background: $primary;                 left: 0;                 top: 0;                 right: 0;                 bottom: 0;                 transform: rotateY(180deg);                 transition: background .1s ease;             }             i {                 left: 75%;                 top: 84%;                 position: absolute;                 display: block;                 transform: rotate(-45deg);                 transform-origin: 0 0;                 &:before {                     content: '';                     width: 4px;                     height: 16px;                     border-radius: 2px;                     background: $primary;                     display: block;                     transform-origin: 50% 0;                     transition: transform .4s ease 0s, background .1s ease;                 }             }         }     }     form {         display: block;         padding: 0;         margin: 0;         input,         span {             white-space: pre;             font-size: 16px;             font-family: inherit;             padding: 8px 16px 8px 12px;             display: block;             line-height: 22px;             font-weight: 500;         }         input {             color: $primaryLight;             caret-color: $primaryLight;             border: 0;             background: 0;             outline: none;             transition: color .1s ease;         }         span {             display: none;         }     }     .close {         border-radius: 50%;         position: absolute;         right: 16px;         width: 24px;         height: 24px;         background: #E4ECFA;         top: 19px;         cursor: pointer;         opacity: 0;         visibility: hidden;         transform: translate(-8px, 0);         transition: transform .3s ease 0s, opacity .3s ease 0s, visibility .3s ease 0s;         &:before,         &:after {             content: '';             position: absolute;             width: 2px;             border-radius: 1px;             height: 10px;             background: #6C7486;             display: block;             left: 50%;             top: 50%;             transition: background .3s ease;         }         &:before {             transform: translate(-50%, -50%) rotate(45deg);         }         &:after {             transform: translate(-50%, -50%) rotate(-45deg);         }     }     ul {         overflow: hidden;         margin: 0;         padding: 8px 0 24px 0;         list-style: none;         position: absolute;         left: 16px;         top: 62px;         white-space: nowrap;         &.show {             li {                 opacity: 1;                 visibility: visible;                 transform: translate(0, 0);                 &:nth-child(1) {                     transition-delay: 0s;                 }                 &:nth-child(2) {                     transition-delay: .3s;                 }             }         }         li {             margin: 0 0 20px 0;             opacity: 0;             visibility: hidden;             transition: all .3s ease;             transform: translate(0, -6px);             &:last-child {                 margin-bottom: 0;             }             a {                 display: block;                 font-size: 12px;                 text-decoration: none;                 padding-left: 36px;                 padding-right: 24px;                 position: relative;                 img {                     display: block;                     left: 0;                     width: 20px;                     top: 50%;                     position: absolute;                     transform: translate(0, -50%);                     &.queble {                         width: 24px;                     }                 }                 h5 {                     margin: 0;                     color: #151924;                     font-size: 12px;                 }                 p {                     margin: 4px 0;                     color: #6C7486;                 }                 span {                     display: block;                     font-size: 10px;                     color: #6C7486;                     opacity: .6;                     font-style: italic;                 }             }             &:nth-child(1) {                 transition-delay: .3s;             }             &:nth-child(2) {                 transition-delay: 0s;             }             &:hover {                 transition: transform .3s ease 0s;                 transform: translate(0, -2px);             }         }     }     &.submit {         background: $primary;         transform: scale(.92);         .bar {             .icon {                 background: #fff;                 &:before {                     background: $primary;                 }                 &:after {                     background: #fff;                 }                 i {                     &:before {                         background: #fff;                     }                 }             }         }         form {             input {                 color: #fff;             }         }     }     &.prepare {         .bar {             &:before {                 opacity: 1;                 transition: opacity 0s ease 1.25s;             }             .icon {                 transform: scale(1);                 transform-origin: 50% 50% 0;                 transition: transform .4s ease .85s, transform-origin 0s ease 1.25s, background .1s ease;                 i {                     &:before {                         transform: scaleY(0);                         transition: transform .4s ease .4s, background .1s ease;                     }                 }             }         }     }     &.animate {         .bar {             .icon {                 transform: rotateY(75deg);                 transition: transform .6s ease 0s;             }             span {                 opacity: 1;             }         }     }     &.done {         padding-right: 56px;         transition: padding .4s ease;         .bar {             .icon {                 transform: rotateY(180deg);                 transition: transform .7s ease 0s;             }         }         .close {             opacity: 1;             visibility: visible;             transform: translate(0, 0);             transition: transform .4s ease .5s, opacity .4s ease .5s, visibility .4s ease .5s;             &:hover {                 background: $primaryLight;                 transition: background .3s ease;                 &:before,                 &:after {                     background: #fff;                 }             }         }     }     &.reset {         .bar {             &:before {                 opacity: 0;                 transition: opacity 0s ease .4s;             }             .icon {                 transform: rotateY(0deg);                 transition: transform .4s ease 0s;             }         }     } }  em {     color: #6C7486;     font-size: 12px;     margin: 24px 0 0 0;     display: block;     text-align: center;     font-style: italic;     strong {         font-weight: bold;     } }  html {     box-sizing: border-box;     -webkit-font-smoothing: antialiased; }  * {     box-sizing: inherit;     &:before,     &:after {         box-sizing: inherit;     } }  // Center & dribbble body {     min-height: 100vh;     font-family: Roboto, Arial;     color: #ADAFB6;     background: #2F3545;     display: flex;     justify-content: center;     align-items: center;     .dribbble {         position: fixed;         display: block;         right: 20px;         bottom: 20px;         img {             display: block;             height: 28px;         }     } }

JavaScript snippet

$(document).ready(function() {      $('.search').each(function() {          var self = $(this);         var form = self.children('form');         var input = form.children('input');         var span = $('<span />').appendTo(form);         var bar = self.children('.bar');         var close = self.children('.close');         var list = self.children('ul');          input.keypress(function (e) {             if(e.which && e.charCode) {                 resizeForText(input, span, $(this).val() + String.fromCharCode(e.keyCode | e.charCode));             }         });          input.keyup(function(e) {             if(e.keyCode === 8 || e.keyCode === 46) {                 resizeForText(input, span, $(this).val());             }         });          resizeForText(input, span, self.val());          form.submit(function(e) {             e.preventDefault();             if(!self.hasClass('prepare')) {                 input.blur();                 $('<span />').text(input.val()).appendTo(bar);                 self.addClass('prepare submit');                 setTimeout(function() {                     self.removeClass('submit');                 }, 200);                 setTimeout(function() {                     self.addClass('animate');                     bar.animate({                         width: (self.outerWidth() - 32)                     }, 800, function() {                         var searchW = ((list.outerWidth() + 32) > (72 + bar.outerWidth())) ? (list.outerWidth() + 32) : 72 + bar.outerWidth();                         self.animate({                             width: searchW                         }, 400);                         setTimeout(function() {                             self.animate({                                 height: self.outerHeight() + list.outerHeight()                             }, 500, function() {                                 list.addClass('show');                             });                         }, 200);                     });                     setTimeout(function() {                         self.addClass('done');                     }, 800);                 }, 1250);             }         });          close.on('click', function(e) {             self.removeClass('done');             setTimeout(function() {                 input.val('');                 bar.animate({                     width: 32                 }, 1000, function() {                     self.addClass('reset');                     bar.children('span').remove();                     setTimeout(function() {                         self.removeClass('animate reset prepare');                         setTimeout(function() {                             input.animate({                                 width: 32                             }, 400, function() {                                 bar.removeAttr('style');                             });                         }, 200);                     }, 400);                 });                 list.removeClass('show');                 setTimeout(function() {                     self.animate({                         height: 62                     }, 400, function() {                         self.animate({                             width: 92                         }, 400, function() {                             self.removeAttr('style');                         });                     });                 }, 200);             }, 500);         });      });  });  function resizeForText(input, span, text) {     text = (!text) ? ' ' : text;     span.text(text);     input.width(span.width()); }

Preview

Search field animation on enter preview

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …