Text To Search Input Animation Using TweenMax | Expanding Search Box

Want to create a search box or input which transforms from the text? Solution: See this Text To Search Input Animation Using TweenMax, Expanding SVG Search Box.

Previously I have shared some search input programs, but it is a little different and unique. Basically, we use the search input to defines a text field for entering search strings. There are many types of the search box design, some have a flat design, some are expandable. But this search input program is unique because it transforms from text to search box.

Today you will learn to create a unique expanding SVG search box. Basically, there is only a text “Search” when you will click above the text, then the “a” of “search” becomes a search input or box by expanding. This is an SVG shape which makes a search box from character “A”. Inside the search input box, there is a search icon in left and cross/close icon in right. The icon is only for showing this is the input, and the cross button for clear entered texts.

So, Today I am sharing Text To Search Input Animation Using TweenMax. There I have used a third-party JS library named TweenMax JS for creating the program, without library this program will very complicated to create. And there I have used SVG for creating all the shapes and icons, there are not any icon libraries. You can use this program on your website, because this is a cool and unique search input animation.

If you are thinking now how this Expanding SVG Search Box which transforms from text actually is, then see the preview given below.

Preview Of Expanding SVG Search Box

See this video preview to getting an idea of how this search box transformation and the animation look like.

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• Circle Rotate Loading Animation
• jQuery Splitter Program
• Login and Registration Form
• Customized Circle Slider

Text To Search Input Animation Source Code

Before sharing source code, let’s talk about it. First I have created an SVG tag where I have created the search box, cross icon, and search icon. After that, I have created the search input using HTML <input type="search"> tag. Also in the HTML file, I have linked external files like CSS, JS, and TweenMax CDN.

Now using CSS I have placed the whole section in the center, as you can see in the preview. With CSS I gave values like color, position, margin, padding, etc to the elements. There I have used a google font for the text, it is perfect for the animation. Now in the JS file, I put all statements and values according to the library’s pre-built functions.

There I have declared the field width, search width, etc and fetched the input and SVG items using this.select('.class or #ID'); command. After that, used if{} else{} statements for declaring conditions. And done many more things according to the TweenMax guide. 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 file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Text To Search Input Animation Using TweenMax, Expanding Search Box interaction. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.