<svg class="close-search" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
  
      <g id="searchGroup" fill="#FBEFF9">
        <g id="se">
       <rect id="hit" width="545" height="60" y="6" fill="transparent"/>
          <path d="M.49,54.88a2.19,2.19,0,0,1,3.12-.28c3.12,2.3,8.07,5.23,13.76,5.23a13.58,13.58,0,0,0,8.54-2.75,6.82,6.82,0,0,0,3.39-5.51c-.09-2.11-.91-3.58-3.21-5.5C24.17,44.6,21,43.5,16.55,42.76l-.18-.09c-4-.73-7.62-1.65-10.19-3.49a9.36,9.36,0,0,1-4.86-8.07A11.13,11.13,0,0,1,6.18,22.3a19.29,19.29,0,0,1,11-3c5.78,0,9.91,2.66,13.4,4.86a2.34,2.34,0,0,1,.64,3.12,2.21,2.21,0,0,1-3,.65c-3.3-2.21-6.6-4.5-11-4.5A13.48,13.48,0,0,0,8.66,26a6.74,6.74,0,0,0-2.85,5.14c0,1.83.83,3.12,2.57,4.5a22.86,22.86,0,0,0,9.18,3.12h.18A31,31,0,0,1,28.66,42.4a11.2,11.2,0,0,1,5.05,9.17c0,3.76-2.11,6.79-5.14,9.09a18.37,18.37,0,0,1-11.2,3.58c-7.24-.1-12.93-3.49-16.61-6.43A2.07,2.07,0,0,1,.49,54.88Z"/>
          <path d="M45.54,41.85c0-12.48,9.73-22.58,21.84-22.58C79,19.27,88.12,28.45,89,40.19v.37a2.08,2.08,0,0,1-2.2,2H50c.46,9.82,8.17,17.25,17.43,17.25a16.91,16.91,0,0,0,14.5-8.16,2.14,2.14,0,0,1,2.94-.74,2.33,2.33,0,0,1,.73,3.12A21.42,21.42,0,0,1,67.38,64.24C55.27,64.24,45.54,54.14,45.54,41.85Zm4.68-3.58H84.27A17.36,17.36,0,0,0,67.38,23.68,17.56,17.56,0,0,0,50.22,38.27Z"/>
        </g>
        <g id="rch">
          <path d="M161.44,21.57a2.2,2.2,0,0,1,2.29-2.21,2.16,2.16,0,0,1,2.11,2.21v9.91a7.29,7.29,0,0,1,.64-1.1c3.4-5.33,9.37-11,18-11a2.18,2.18,0,0,1,2.2,2.21,2.23,2.23,0,0,1-2.2,2.2c-5.87,0-9.91,3.3-13,7.34A40.37,40.37,0,0,0,166,41.57a1.35,1.35,0,0,0-.19.73V62a2.16,2.16,0,0,1-2.11,2.21A2.2,2.2,0,0,1,161.44,62Z"/>
          <path d="M196.22,41.66c0-12.48,10.27-22.39,23.12-22.39a23.17,23.17,0,0,1,14.32,5,2.06,2.06,0,0,1,.27,3,2.25,2.25,0,0,1-3,.37,18.44,18.44,0,0,0-11.56-4c-10.46,0-18.72,8.17-18.72,18.08,0,10.1,8.26,18.17,18.72,18.17a19,19,0,0,0,11.56-3.94,2.26,2.26,0,0,1,3,.36,2.17,2.17,0,0,1-.46,3.21,23.18,23.18,0,0,1-14.13,4.78C206.49,64.24,196.22,54.33,196.22,41.66Z"/>
          <path d="M284.86,37c0-7.89-6.42-13.21-14.32-13.21S256.32,29.09,256.32,37V62.31c0,.18-.09.27-.09.37s-.09.27-.19.36a2.07,2.07,0,0,1-1.37,1.1.31.31,0,0,1-.19.1H254a2.51,2.51,0,0,1-1.75-.74,2.75,2.75,0,0,1-.36-.73,1.89,1.89,0,0,1-.1-.74V2.2a2.25,2.25,0,0,1,4.5,0V25.88a18.57,18.57,0,0,1,14.22-6.61c10.37,0,18.82,7.34,18.82,17.71V62a2.25,2.25,0,0,1-4.5,0Z"/>
        </g>
        <g id="letterA" stroke="#FBEFF9">
          <rect id="field" x="102.03" y="21.49" width="41" height="41" rx="20.5" ry="20.5" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="4.5"/>
          <line id="tail" x1="143.28" y1="62.59" x2="143.28" y2="21.82" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="4.5"/>
          <g id="magnifier" opacity="0.5">
            <circle cx="121.92" cy="41.93" r="11" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
            <line x1="131.24" y1="48.22" x2="139.99" y2="53.95" fill="none"  stroke-miterlimit="10" stroke-width="3"/>
          </g>

      </g>
       
        </g>    
      <g id="close" stroke="#FBEFF9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" opacity="0.5">
        <circle cx="12.5" cy="12.5" r="11" fill="transparent" />
        <line x1="8.78" y1="8.62" x2="16.46" y2="16.61" fill="none" />
        <line x1="16.46" y1="8.62" x2="8.78" y2="16.61" fill="none" />
      </g>  
  </defs>
 <g transform="translate(-30, 0)">
      <use class="wholeSearch" xlink:href="#searchGroup" x="300" y="270"/>
      <use class="close" xlink:href="#close" x="511" y="300"/>
  </g>
 </svg>
<input id="search" autocomplete="off" maxlength="32"></input>
body {
 background-color: #42AB40;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 600px;
 visibility: hidden;
 overflow:visible;
 position:fixed;
 
}

input{
 position:fixed;

 border:none;
 outline:none;
 height:34px;
 line-height:normal;  
 font-size:25px;
 width:210px;
 font-family:'Quicksand', sans-serif;
 font-weight:700;
 color:#FBEFF9;
 background:transparent;
 text-align:left;
}

.disabled{
 pointer-events:none;
}
#searchGroup, .close, #search, .hit{
 -webkit-tap-highlight-color:transparent;
}
class App {
 
 
 select = e => document.querySelector(e);
 selectAll = e => document.querySelectorAll(e); 
 mainTl = new TimelineMax({paused:true});
 search = this.select('#search');
 magnifier = this.select('#magnifier');
 searchGroup = this.select('#searchGroup');
 close = this.select('.close');
 wholeSearch = this.select('.wholeSearch');
 hit = this.select('#hit');
 fieldWidth = 301;
 searchWidth = 210;
 seX = -260;
 fieldX = -260;
 growInc = 15;
 magStartX = -200;
 magEndX = -258;
 searchGroupX = 100; 
 wholeSearchX = 400;
 searchX = 74;
 minChars = 15;
 maxChars = 26;
 charCount = 1; 

 
  constructor(){
       
   document.body.classList.add('close-search');
   
  TweenMax.globalTimeScale(2);
   const tl = new TimelineMax();

   
   TweenMax.set(this.search, {
    x:this.searchX,
    y:12,
    xPercent:-50,
    yPercent:0
   })   
   TweenMax.set(this.close, {
    x:0,
    y:0 
   })
   //this.mainTl.add(tl);
    
   this.mainTl.to('#se', 1, {
    x:this.seX,
    ease:Expo.easeInOut
   })
   .to('#field', 1, {
    attr:{
     width:this.fieldWidth
    },
    x:this.fieldX,
    ease:Expo.easeInOut
   },'-=1')
   .to(this.wholeSearch, 1, {
    attr:{
      x:this.wholeSearchX
    },
    ease:Expo.easeInOut
   },'-=1')
   .fromTo(this.magnifier, 1, {
    autoAlpha:0,
    scale:0,
    //rotation:-90,
    transformOrigin:'0% 45%',
    x:this.magStartX
   },{
    autoAlpha:0.38,
    rotation:0,
    scale:1,
    transformOrigin:'0% 45%',
    x:this.magEndX,
    ease:Expo.easeInOut
   },'-=0.95')
   .fromTo(this.close, 1, {
    autoAlpha:0,
    scale:0,
    //rotation:-90,
    transformOrigin:'50% 50%',
    svgOrigin:'511 300',
    x:0
   },{
    autoAlpha:0.5,
    rotation:0,
    scale:1,
    transformOrigin:'50% 50%',
    svgOrigin:'511 300',
    x:0,
    ease:Expo.easeInOut
   },'-=1')
   .from(this.search, 0.5, {
    autoAlpha:0
   },'-=0.5')


  
   .addPause('+=0', function(){this.search.focus();}, [], this )
   
   
   this.close.addEventListener('click', this.clearField);
   this.wholeSearch.addEventListener('click', this.clickSearch);
   this.wholeSearch.addEventListener('touchstart', this.clickSearch);
   document.body.addEventListener('click', this.closeSearch);

   this.search.addEventListener('keydown', this.onKeyDown);
  }
 clearField = e => {
  
  if(this.search.value == ""){
   this.doOutro();
  }  else {
  //this.search.value = "";
  TweenMax.to(this.search, 0.2, {
   value:'',
   onComplete:this.resetFieldWidth,
   ease:Linear.easeNone
  })
  this.search.focus();
   
  } 
 }
 
 doOutro = e => {
  this.hit.classList.remove('disabled');
  this.searchGroup.classList.remove('disabled');    
  var outroTl = new TimelineMax({onComplete: () => {
    this.search.value = "";
   
   this.mainTl.pause(0);
   }}).timeScale(1);
   outroTl.to([this.magnifier, this.close, this.search], 0.2, {
     autoAlpha:0,
     ease:Sine.easeIn
    })
    .to('#se', 1, {
       x:0,
       ease:Expo.easeInOut
     },'-=0.2')
    .to('#field', 1, {
     attr:{
      width:41
     },
     x:0,
     ease:Expo.easeInOut
    },'-=1')
    .to(this.search, 1, {
     width:this.searchWidth,
     x:this.searchX,
     ease:Expo.easeInOut
    },'-=1')
     .to(this.wholeSearch, 1, {
     attr:{
      x:300
     },
     ease:Expo.easeInOut
    },'-=1')
 }
 

 onKeyDown = e => {

    this.charCount = this.search.value.length+1;

    if(this.charCount >= this.minChars){
     let diffChars = this.charCount - this.minChars;
     TweenMax.to('#se',0.2, {
      x:this.seX - (diffChars * this.growInc)
     })     
     TweenMax.to('#field',0.2, {
      attr:{
       width:this.fieldWidth + (diffChars * this.growInc),
      },
       x:this.fieldX - (diffChars * this.growInc)
     })
     
     TweenMax.to(this.search, 0.2, {
      x:this.searchX + (diffChars * (this.growInc/2)),
      width:this.searchWidth + (diffChars * this.growInc)
     })

     TweenMax.to(this.magnifier, 0.2, {
      x:this.magEndX - (diffChars * this.growInc)
     })
     TweenMax.to(this.wholeSearch, 0.2, {
      attr:{
        x:this.wholeSearchX + (diffChars * (this.growInc/2))       
      }
     })
     TweenMax.to(this.close, 0.2, {
      x:(diffChars * (this.growInc/2)) 
     })
    }
     if(this.search.value != ""){
      //this.hit.classList.add('disabled');
      //this.searchGroup.classList.add('disabled');
     }
 }
 
 resetFieldWidth = () => {
   let tl = new TimelineMax();
  
     tl.to('#se',1, {
      x:this.seX ,
      ease:Expo.easeInOut
     })     
     .to('#field',1, {
      attr:{
       width:this.fieldWidth 
      },
       x:this.fieldX ,
      ease:Expo.easeInOut
     },0)
     
     .to(this.search, 1, {
      x:this.searchX,
      width:this.searchWidth ,
      ease:Expo.easeInOut
     },0)

     .to(this.magnifier, 1, {
      x:this.magEndX ,
      ease:Expo.easeInOut
     },0)
     .to(this.wholeSearch, 1, {
      attr:{
        x:this.wholeSearchX        
      },
      ease:Expo.easeInOut
     },0)
     .to(this.close, 1, {
      x:0,
      ease:Expo.easeInOut
     },0)
    
  
 }
 
 clickSearch= e =>{
  //console.log("clickSearch");

  if(this.mainTl.time() == 0){
   
   this.mainTl.play(0);
   
  } else {
   
   this.doOutro();

  }
 }
 
 closeSearch = e => {

  if(this.mainTl.time() > 0){
   if(e.target.classList.contains('close-search')){
    this.doOutro();
   }
  }
 }
 
}


TweenMax.set('svg', {
  visibility: 'visible'
})

var app = new App();

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js