Search Animation

by Venkatesh Dematti

HTML

<!DOCTYPE html>

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Search Input animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="search">
  <svg class="search-svg" viewBox="0 0 320 70"
       data-init="M160,3 L160,3 a27,27 0 0,1 0,54 L160,57 a27,27 0 0,1 0,-54 M197,67 181.21,51.21"
       data-mid="M160,3 L160,3 a27,27 0 0,1 0,54 L160,57 a27,27 0 0,1 0,-54 M179.5,49.5 179.5,49.5"
       data-active="M27,3 L293,3 a27,27 0 0,1 0,54 L27,57 a27,27 0 0,1 0,-54 M179.5,49.5 179.5,49.5">
    <path class="search-svg__path" d="M160,3 L160,3 a27,27 0 0,1 0,54 L160,57 a27,27 0 0,1 0,-54 M197,67 181.21,51.21" />
  </svg>
  <input type="text" class="search-input" />
  <div class="closeBtn"></div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>
<script  src="fucntion.js"></script>

</body>
</html>

CSS

/* Code By Webdevtrick ( https://webdevtrick.com ) */
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-size: 62.5%;
  height: 100%;
}
body {
  background: #1da1f2;
}
svg {
  overflow: visible;
}
.search {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -16rem;
  margin-top: -3.5rem;
  width: 32rem;
  height: 7rem;
}
.search:not(.active) {
  cursor: pointer;
}
.search-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.search-svg__path {
  fill: none;
  stroke: #fff;
  stroke-width: 6px;
}
.search-input {
  position: relative;
  width: 27rem;
  height: 6rem;
  padding: 1.2rem 0 1.2rem 2.5rem;
  background: transparent;
  outline: none;
  border: none;
  font-size: 3.6rem;
  color: #fff;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s;
}
.search-input.visible {
  z-index: auto;
  opacity: 1;
}
.closeBtn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  z-index: -1;
}
.closeBtn.visible {
  z-index: auto;
}
.closeBtn.visible:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 1;
  transition: opacity 0.1s, -webkit-transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58);
  transition: transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s;
  transition: transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s, -webkit-transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58);
}
.closeBtn.visible:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 1;
  transition: opacity 0.1s 0.2s, -webkit-transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58);
  transition: transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.2s;
  transition: transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.2s, -webkit-transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58);
}
.closeBtn:before, .closeBtn:after {
 ...

JavaScript

// Code By Webdevtrick ( https://webdevtrick.com )
$(document).ready(function() {
  
  var $search = $(".search"),
      $input = $(".search-input"),
      $close = $(".closeBtn"),
      $svg = $(".search-svg"),
      $path = $(".search-svg__path")[0],
      initD = $svg.data("init"),
      midD = $svg.data("mid"),
      finalD = $svg.data("active"),
      backDelay = 400,
      midAnim = 200,
      bigAnim = 400,
      animating = false;
  
  $(document).on("click", ".search:not(.active)", function() {
    if (animating) return;
    animating = true;
    $search.addClass("active");
    
    Snap($path).animate({"path": midD}, midAnim, mina.backin, function() {
      Snap($path).animate({"path": finalD}, bigAnim, mina.easeinout, function() {
        $input.addClass("visible");
        $input.focus();
        $close.addClass("visible");
        animating = false;
      });
    });
    
  });
  
  $(document).on("click", ".closeBtn", function() {
    if (animating) return;
    animating = true;
    $input.removeClass("visible");
    $close.removeClass("visible");
    $search.removeClass("active");
    
    setTimeout(function() {
      Snap($path).animate({"path": midD}, bigAnim, mina.easeinout, function() {
        Snap($path).animate({"path": initD}, midAnim, mina.easeinout, function() {
          animating = false;
        });
      });
    }, backDelay);
  });
  
});