How we can create an animated search field using HTML CSS and JavaScript? Solution: Check out this SVG Search Input Animation With HTML CSS JS, Animated Search Icon.
Previously I have shared an Animated Search Box, but it is something different because the icon and field created using SVG. Basically, this concept is with a search icon which expands on click and becomes an input filed. Most of the websites use this type of search field animation for better design and user interaction.
Today you will learn to create Animated Search Icon using jQuery. As you can see in the title, this is an SVG based search input because the search icon, input field, the close button created using that. SVG stands for Scalable Vector Graphics, using that we can create any type of shape. And there is a search icon when you will click on that it will expand to a text input field.
So, Today I am sharing SVG Search Input Animation With HTML CSS JS. I have used jQuery for creating this program, but as you know jQuery is a JS library that’s why I am putting this in JavaScript category. This is an advance search input animation that you can put in your website after database integration.
If you are thinking now how this input animation actually is, then see the preview given below.
Preview Of Animated Search Icon and Field
See this video preview to getting an idea of how this search animation looks like.
Now you can see this visually, you can also see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Floating Input Label Animation
- Full Page Scrolling Website
- CSS Clip Path Animation Card
- Animated Scroll Images
SVG Search Input Animation With HTML CSS JS Source Code
Before sharing source code, let’s talk about it. First, I have created the search icons using SVG and put a text input and a div for the close button. And also in the HTML file, I have linked jquery and snap.svg library. This JavaScript library makes easy working with SVG (info). As you know libraries are created for easy and fast work.
Now using CSS, I have placed all the elements on the right place. And for creating the close icon I have used CSS blank content using content: '' command. And there I have used transform and transition for creating the animation effect. This is also responsive it will fit on small screen size because It is small in size and created with SVG.
Here jQuery handling the main toggle feature and animating the SVG path. There I have done the search icon click and close button click action’s condition. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <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> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
/* 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 { content: ""; position: absolute; top: 1.2rem; left: 0; width: 100%; height: 0.6rem; background: #fff; border-radius: 0.5rem; opacity: 0; } .closeBtn:before { -webkit-transform: rotate(-45deg) translateX(2rem); transform: rotate(-45deg) translateX(2rem); transition: opacity 0.1s 0.1s, -webkit-transform 0.2s; transition: transform 0.2s, opacity 0.1s 0.1s; transition: transform 0.2s, opacity 0.1s 0.1s, -webkit-transform 0.2s; } .closeBtn:after { -webkit-transform: rotate(45deg) translateX(2rem); transform: rotate(45deg) translateX(2rem); transition: opacity 0.1s 0.3s, -webkit-transform 0.2s 0.2s; transition: transform 0.2s 0.2s, opacity 0.1s 0.3s; transition: transform 0.2s 0.2s, opacity 0.1s 0.3s, -webkit-transform 0.2s 0.2s; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
// 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); }); }); |
That’s It. Now you have successfully created SVG Search Input Animation With HTML CSS JS, Animated Search Icon. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Nice. Keep sharing.
thanks
Cool animation. Slight improvement would be to focus the input via JS when it’s rendered so we don’t have to tap it twice.
you’re right.
How you created that demo button in this WordPress site? Any guide about that.