SVG Search Input Animation | Animated Search Icon With HTML CSS JS

In this tutorial, today we learn how we can create SVG Search Input Animation or Animated Search Icon using HTML, CSS, Js?

In the previous tutorial, SVG Button Hover Animation Using CSS | SVG Button Hover Effects I was discussing, what is SVG? and SVG Button Hover animation.

therefore, in this tutorial, I will use SVG icon for search, which expands on the click and becomes an input field, these are the whole concept, which I have used to create the SVG Search Input Animation program.

I hope you will be seen on multiple websites, search field animation, In mostly website, have the search field Animation option, which is design with different animation with attractive design, for user interaction.

so, how we can create SVG Search Input Animation program with the help of HTML, CSS, and small use of the javaScript library, as you can see in the title I have used SVG search keyword, because of it is an SVG Based search input animation.

here search icon, input field, creating for the search. therefore, SVG stands for scalable Vector Graphics, it is used for creating any type of shape, and I have used the search icon.

when you click on the search icon, it will expand to a text input field, and when you click on the outside from search icon, then the input field will be closed.

Therefore, I have used jQuery for creating this program, as I told you in the last previous post, jQuery is JS library functions, that are the region putting this in JavaScript category.

You can use this program in your website after few changes with database integration, according to your database search keyword, integrate with your website. for a view live demo, click on the below-given button.

Explanation of Source Code For SVG Search Input Animation using HTML, CSS and JS

Let’s discuss the source code which I have used to create the program, first I have used a class="container" and put all the elements inside it. first I have created a, class=" SearchBar" inside this class I will create a search icon using SVG and put a text input. therefore, if you see, in the HTML file I have linked jquery and snap.svg library.

therefore, The JavaScript Library makes very easy working with the SVG, you can get more info here about the snap.svg, and also you know that Javascript libraries are created for easy and fast work.

In the stylesheet, I have used transition and transform for creating the animation effect. these effects will be responsive, it will fit on every media size screen because this effect is created with SVG, it is small in size.

therefore I have placed all the elements on the right place. also I have used more CSS properties for creating the effect and making the program such as <code>position, stroke-width, stroke, background-color, transition, transform</code>, etc.

therefore, on the click event search bar expend, this effect handle with jQuery, and animated the SVG path, so, I have discussed almost every main point.

which I have used to create SVG Search Input Animation, and have more thing, which I can’t explain in writing, In this program.

you need to create three files such as the first file for HTML and Second file for CSS and third file for JavaScript.

I hope you will follow all the step to create a program. after getting the code segment you will understand in a better. when you need this program, use it after a few changes in source code.

First Step: Create HTML file as name “index.html” | Change fileName as you want

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cool Animated SVG Search Field Demo</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<div class="container">
<h1>Cool Animated SVG Search Field Demo</h1>
<div class="SearchBar"> <svg version="1.1" viewBox="0 0 142.358 24.582">
  <path id="SearchBar-path" fill="none" d="M131.597,14.529c-1.487,1.487-3.542,2.407-5.811,2.407
        c-4.539,0-8.218-3.679-8.218-8.218s3.679-8.218,8.218-8.218c4.539,0,8.218,3.679,8.218,8.218
        C134.004,10.987,133.084,13.042,131.597,14.529c0,0,9.554,9.554,9.554,9.554H0"/>
  </svg>
  <label for="SearchBar" class="SearchBar-label"></label>
  <input type="SearchBar" id="SearchBar" autocomplete="off" class="input-SearchBar"/>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/functions.js"></script> 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Cool Animated SVG Search Field Demo</title>

</head>

<body>

<h1>Cool Animated SVG Search Field Demo</h1>

<path id="SearchBar-path" fill="none" d="M131.597,14.529c-1.487,1.487-3.542,2.407-5.811,2.407

c-4.539,0-8.218-3.679-8.218-8.218s3.679-8.218,8.218-8.218c4.539,0,8.218,3.679,8.218,8.218

C134.004,10.987,133.084,13.042,131.597,14.529c0,0,9.554,9.554,9.554,9.554H0"/>

</svg>

</div>

</body>

</html>

Second Step: Create CSS file as name “stylesheet.css” | Change fileName as you want

body {
  color: #fff;
  background-color: #403535;
}
.container{
  padding-top: 10%;
}
h1{
  text-align: center;;
}
.SearchBar {
  position: absolute;
  width: 600px;
}
svg {
  position: absolute;
  text-align: center;
  width: 750px;
  height: auto;
  stroke-width: 8px;
  stroke: #ff2805;
  stroke-width: 1px;
  stroke-dashoffset: 0;
  stroke-dasharray: 64.6 206.305;
  transition: all 0.5s ease-in-out;
}
.input-SearchBar {
  position: absolute;
  height: 64px;
  top: 0;
  color: #fff;
  bottom: 0;
  left: 0;
  border: none;
  background-color: transparent;
  outline: none;
  padding: 64px;
  font-size: 50px;
}

.SearchBar-label {
  position: absolute;
  display: block;
  width: 108px;
  height: 108px;
  top: 0;
  margin-left: -54px;
  z-index: 100;
  transition: 0.5s ease-in-out;
}

.isActive .SearchBar-label { transform: translateX(246px); }

.isActive svg {
  stroke-dashoffset: -65;
  stroke-dasharray: 141.305 65;
  transform: translateX(0);
}

.isActive.full svg {
  stroke-dashoffset: -65;
  stroke-dasharray: 141.305 65;
  transform: translateX(0);
}

.full .SearchBar-label { transform: translateX(246px); }

.full svg {
  stroke-dashoffset: 0;
  stroke-dasharray: 64.6 206.305;
  transform: translateX(0);
}

body {

color: #fff;

background-color: #403535;

}

.container{

padding-top: 10%;

}

h1{

text-align: center;;

}

.SearchBar {

position: absolute;

width: 600px;

}

svg {

position: absolute;

text-align: center;

width: 750px;

height: auto;

stroke-width: 8px;

stroke: #ff2805;

stroke-width: 1px;

stroke-dashoffset: 0;

stroke-dasharray: 64.6 206.305;

transition: all 0.5s ease-in-out;

}

.input-SearchBar {

position: absolute;

height: 64px;

top: 0;

color: #fff;

bottom: 0;

left: 0;

border: none;

background-color: transparent;

outline: none;

padding: 64px;

font-size: 50px;

}

.SearchBar-label {

position: absolute;

display: block;

width: 108px;

height: 108px;

top: 0;

margin-left: -54px;

z-index: 100;

transition: 0.5s ease-in-out;

}

.isActive .SearchBar-label { transform: translateX(246px); }

.isActive svg {

stroke-dashoffset: -65;

stroke-dasharray: 141.305 65;

transform: translateX(0);

}

.isActive.full svg {

stroke-dashoffset: -65;

stroke-dasharray: 141.305 65;

transform: translateX(0);

}

.full .SearchBar-label { transform: translateX(246px); }

.full svg {

stroke-dashoffset: 0;

stroke-dasharray: 64.6 206.305;

transform: translateX(0);

}

Third Step: Create JavaScript file as name “functions.js” | Change fileName as you want

var SearchBarField = $('.SearchBar');
var SearchBarInput = $("input[type='SearchBar']");

var checkSearchBar = function(){
    var contents = SearchBarInput.val();
    if(contents.length !== 0){
       SearchBarField.addClass('full');
    } else {
       SearchBarField.removeClass('full');
    }
};

$("input[type='SearchBar']").focus(function(){
    SearchBarField.addClass('isActive');
  }).blur(function(){
    SearchBarField.removeClass('isActive');
    checkSearchBar();
});



  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();


   $(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);
  });

var SearchBarField = $('.SearchBar');

var SearchBarInput = $("input[type='SearchBar']");

var checkSearchBar = function(){

var contents = SearchBarInput.val();

if(contents.length !== 0){

SearchBarField.addClass('full');

} else {

SearchBarField.removeClass('full');

}

};

$("input[type='SearchBar']").focus(function(){

SearchBarField.addClass('isActive');

}).blur(function(){

SearchBarField.removeClass('isActive');

checkSearchBar();

});

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-36251023-1']);

_gaq.push(['_setDomainName', 'jqueryscript.net']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

$(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);

});

Therefore, see the code segment to create the SVG Search Input Animation with HTML, CSS, JS, you will be created successfully.

you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.

SVG Search Input Animation | Animated Search Icon With HTML CSS JS

Explanation of Source Code For SVG Search Input Animation using HTML, CSS and JS

First Step: Create HTML file as name “index.html” | Change fileName as you want

Second Step: Create CSS file as name “stylesheet.css” | Change fileName as you want

Third Step: Create JavaScript file as name “functions.js” | Change fileName as you want

Related Posts

About Author

admin