Search Bar – CodingNepal

Create a Responsive Search Bar in HTML & CSS | Free Source Code

CodingNepal — Sat, 12 Nov 2022 21:11:20 +0000

The search bar has become the most important section on the website or application. You must have used it to search for information on YouTube, Google, Facebook, and other sites. Although Search Box is the most important section for the website or application even then it can be created easily by using basic code of HTML & CSS.

Today in this blog you will learn to Create a Responsive Search Bar in HTML & CSS. Even if you have basic knowledge of HTML & CSS, then also you can create a Search Bar. Recently I created a Simple Website in HTML & CSS, I hope that project also could be beneficial for you.

The search bar is the input section where users have to type what they want to search. For example, In Google, if we have to search or find articles, websites, images, and videos then we need to use the search bar.

Take a look at the given preview of our Search Box that we are going to create today. As you can see in the image, there is a search bar with a long width. At that Search Bar, there is a search icon, search field, and search button. This Search Bar is fully responsive and easily get fits any size of screen device.

To see the real demo of this Search Box and all the HTML & CSS code that I have used to create this Responsive and Full-Screen Search Bar, I have provided a video tutorial.

Create Search Bar in HTML & CSS | Video Tutorial

I have also provided all the HTML & CSS code that I have used to create this Responsive Search Bar. Before getting into the source code file, I would like to briefly explain the given video tutorial of the Search Box.

As you have seen in the video tutorial. At first, on the screen, there was a Full-Screen Search Bar with an input field, a search icon, and a beautiful. You may have got to know that this search bar actually can be created with HTML and CSS code. To give click animation on the button I had to use some JavaScript code.

I believe now you are able to create a Search Box. If you are feeling difficulty and wondering to get all the HTML CSS and JavaScript code of this Search Bar that I have used then, you can take all the source code from below.

Search Bar in HTML & CSS [Source Code]

To create a Responsive Search Bar, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Responsive Search Bar by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
   Search Bar in HTML and CSS

Second, paste the following codes into your style.css file.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.input-box {
  position: relative;
  height: 76px;
  max-width: 900px;
  width: 100%;
  background: #fff;
  margin: 0 20px;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-box i,
.input-box .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input-box i {
  left: 20px;
  font-size: 30px;
  color: #707070;
}
.input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  font-weight: 400;
  border: none;
  padding: 0 155px 0 65px;
  background-color: transparent;
}
.input-box .button {
  right: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  background-color: #4070f4;
  cursor: pointer;
}
.input-box .button:active {
  transform: translateY(-50%) scale(0.98);
}

/* Responsive */
@media screen and (max-width: 500px) {
  .input-box {
    height: 66px;
    margin: 0 8px;
  }
  .input-box i {
    left: 12px;
    font-size: 25px;
  }
  .input-box input {
    padding: 0 112px 0 50px;
  }
  .input-box .button {
    right: 12px;
    font-size: 14px;
    padding: 8px 18px;
  }
}

That’s all, now you’ve successfully created a project on the Responsive Search Bar. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Search Bar in HTML CSS & JavaScript

CodingNepal — Fri, 15 Jul 2022 21:11:20 +0000

Hello friend, I hope you are doing awesome. Today you will learn to create a Search Bar in HTML CSS & JavaScript I will add some animation to our search bar also. Earlier I created a Seach Box using HTML and CSS only. But in today’s search box I will add a few JavaScript.

Search Bars are the section where users can search for the things that they want to. Search Bar can be in different designs but the main objective of the search bar is to search.

Have a quick look on the given image of our search bar on the webpage. As you can see from the image of our search box. There is a search box, inside the search box there are two icons and a search section. Actually, in our real project, this search bar will be in closed form and when we click on the search icon then the search bar will open, and close the search bar we need to click on the cross icon. I have added beautiful cubic animation too.

To see the real demo of this search bar and its animation, you need to watch the give video tutorial of our search bar. Also by watching the video tutorial, you will get an idea about HTML CSS, and JavaScript codes that I have used to create this search bar.

Search Bar in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Search Bar. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial. At first, we saw one square shape box with a search icon. When I clicked on that square box, the search box opened and cross icons also appeared. When I clicked on that cross icon then the search bar closed and the cross icon disappeared. The search bar is created by HTML and CSS, for the animation, I have used CSS cubic bezier and to open and close the search bar I have used some JavaScript code.

I hope now you can create this search bar using HTML CSS and JavaScript. If you are feeling difficulty creating this sidebar, I have provided all the source code below.

Search Bar [Source Code]

To get the following HTML and CSS code for the Search Bar you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.



    
    
        
        
        
         Animated Search Bar

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
  overflow: hidden;
}
.input-box{
  position: relative;
  height: 55px;
  max-width: 55px;
  width: 100%;
  margin: 0 40px;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box.open{
  max-width: 350px;
}
input{
  position: relative;
  outline: none;
  border: none;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}
.input-box.open{
  padding: 0 15px 0 65px;
}
.icon{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 60px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.search-icon,
.close-icon{
  position: absolute;
  top: 50%;
  font-size: 30px;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-icon{
  color: #4070f4;
  
  transform: translateY(-50%) rotate(90deg);
}
.input-box.open .search-icon{
  transform: translateY(-50%) rotate(0);
}
.close-icon{
  right: -45px;
  color: #fff;
  padding: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-box.open .close-icon{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(180deg);
}

Search Bar with Autocomplete Search Suggestions in JavaScript

CodingNepal — Sat, 17 Oct 2020 10:04:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Simple Search Bar with Autocomplete Search Suggestions using HTML CSS & JavaScript. Earlier I’ve shared a blog on how to create an Animated Search Bar using only HTML & CSS and now it’s time to create Autocomplete Textbox or Searchbox.

A search box is a graphical UI element present in many websites. It works as the field for a query input or search term from the user to search and retrieve related information from the database. Autocomplete is a pattern or feature used to display query suggestions and predict the rest of a word a user is typing.

In this program [Search Bar with Auto-complete Search Suggestions], on the webpage, there is a search bar and when you type something, there is shown a autocomplete box that suggests several predictions of how your query could be completed means there are shown several suggestions related your query. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Autocomplete Search Bar].

Video Tutorial of Search Bar with Autocomplete Search

In the video, you have seen the Search Bar with Autocomplete Search Suggestions and there is no content-related user query so I redirected the user query to Google but you can show your content and I hope you have understood the basic codes or concepts behind creating this autocomplete textbox or search box.

If you know PHP & MySQL then you can use this search bar to retrieve or shown several search suggestions related to the user queries from your database. If you like this program and want to get source files or codes of this program then you need to do a little bit of scroll down.

Search Bar with Auto-complete Search [Source Codes]

To create this program (Autocomplete Search Suggestions). First, you need to create four Files one HTML File, CSS File and two are JavaScript Files. After creating these files just paste the following codes into your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




  
    
    Autocomplete Search Box | CodingNepal

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  background: #644bff;
  padding: 0 20px;
}

::selection{
  color: #fff;
  background: #664AFF;
}

.wrapper{
  max-width: 450px;
  margin: 150px auto;
}

.wrapper .search-input{
  background: #fff;
  width: 100%;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}

.search-input input{
  height: 55px;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 0 60px 0 20px;
  font-size: 18px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

.search-input.active input{
  border-radius: 5px 5px 0 0;
}

.search-input .autocom-box{
  padding: 0;
  opacity: 0;
  pointer-events: none;
  max-height: 280px;
  overflow-y: auto;
}

.search-input.active .autocom-box{
  padding: 10px 8px;
  opacity: 1;
  pointer-events: auto;
}

.autocom-box li{
  list-style: none;
  padding: 8px 12px;
  display: none;
  width: 100%;
  cursor: default;
  border-radius: 3px;
}

.search-input.active .autocom-box li{
  display: block;
}
.autocom-box li:hover{
  background: #efefef;
}

.search-input .icon{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  color: #644bff;
  cursor: pointer;
}

Third, create a JavaScript file with the name of suggestions.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension. We create this file to store all suggestion keywords.

let suggestions = [
    "Channel",
    "CodingLab",
    "CodingNepal",
    "YouTube",
    "YouTuber",
    "YouTube Channel",
    "Blogger",
    "Bollywood",
    "Vlogger",
    "Vechiles",
    "Facebook",
    "Freelancer",
    "Facebook Page",
    "Designer",
    "Developer",
    "Web Designer",
    "Web Developer",
    "Login Form in HTML & CSS",
    "How to learn HTML & CSS",
    "How to learn JavaScript",
    "How to became Freelancer",
    "How to became Web Designer",
    "How to start Gaming Channel",
    "How to start YouTube Channel",
    "What does HTML stands for?",
    "What does CSS stands for?",
];

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

// getting all required elements
const searchWrapper = document.querySelector(".search-input");
const inputBox = searchWrapper.querySelector("input");
const suggBox = searchWrapper.querySelector(".autocom-box");
const icon = searchWrapper.querySelector(".icon");
let linkTag = searchWrapper.querySelector("a");
let webLink;

// if user press any key and release
inputBox.onkeyup = (e)=>{
    let userData = e.target.value; //user enetered data
    let emptyArray = [];
    if(userData){
        icon.onclick = ()=>{
            webLink = `https://www.google.com/search?q=${userData}`;
            linkTag.setAttribute("href", webLink);
            linkTag.click();
        }
        emptyArray = suggestions.filter((data)=>{
            //filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
            return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
        });
        emptyArray = emptyArray.map((data)=>{
            // passing return data inside li tag
            return data = `${data}`;
        });
        searchWrapper.classList.add("active"); //show autocomplete box
        showSuggestions(emptyArray);
        let allList = suggBox.querySelectorAll("li");
        for (let i = 0; i < allList.length; i++) {
            //adding onclick attribute in all li tag
            allList[i].setAttribute("onclick", "select(this)");
        }
    }else{
        searchWrapper.classList.remove("active"); //hide autocomplete box
    }
}

function select(element){
    let selectData = element.textContent;
    inputBox.value = selectData;
    icon.onclick = ()=>{
        webLink = `https://www.google.com/search?q=${selectData}`;
        linkTag.setAttribute("href", webLink);
        linkTag.click();
    }
    searchWrapper.classList.remove("active");
}

function showSuggestions(list){
    let listData;
    if(!list.length){
        userValue = inputBox.value;
        listData = `${userValue}`;
    }else{
      listData = list.join('');
    }
    suggBox.innerHTML = listData;
}
}

That’s all, now you’ve successfully created a Search Bar with Autocomplete Search Suggestions in JavaScript. If your code does not work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Animated Search Box using HTML CSS & JavaScript

CodingNepal — Fri, 04 Sep 2020 13:03:00 +0000

Hello readers, Today in this blog you’ll learn how to create an Animated Search Box/Bar using HTML CSS & JavaScript. Earlier I have shared a blog on how to create FullScreen Overlay Search Box Animation using only HTML & CSS and now it’s time to create an Elastic Animation on Search Bar with JavaScript.

The search box is the most important graphical element present in every website. It works as the field for a query input or searches term from the user to search and retrieve related data from the database. A simple search bar can make using HTML, CSS, and JavaScript only.

In this program [Animated Search Box], at first, on the webpage, there is only a search icon and when you click on that icon, then the search input appears with an elastic animation. When you type something and click on the search icon, your typed data is shown at the bottom of the search bar. There is also shown a cancel or hide icon [cross sign icon] and when you click on that cancel icon, the visible search input and your typed data will be hidden.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Elastic Animation on Search Bar].

Video Tutorial of Elastic Animation on Search Bar

In the video, you have seen an Animated Search Bar and I hope you’ve understood the basic codes behind creating this program. I used pure JavaScript to create this search bar so if you’re a beginner and you know a little bit of JavaScript, then you can easily create this type of search bar animation.

If you have knowledge of backend languages like PHP then you can add PHP code and connect this search box with the database to retrieve data according to the user queries. I believe this small search bar program will help you a lot. If you like this program [Elastic Animation on Search Bar] and want to get source codes. You can easily get the source codes of this program.

Animated Search Box [Source Codes]

To create this program [Elastic Animation on Search Bar]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




  
    
    Animated Search Box | CodingNepal

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #664AFF;
}
::selection{
  color: #fff;
  background: #664AFF;
}
.search-box{
  position: relative;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box.active{
  width: 350px;
}
.search-box input{
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50px;
  background: #fff;
  outline: none;
  padding: 0 60px 0 20px;
  font-size: 18px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box input.active{
  opacity: 1;
}
.search-box input::placeholder{
  color: #a6a6a6;
}
.search-box .search-icon{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 22px;
  color: #664AFF;
  cursor: pointer;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .search-icon.active{
  right: 5px;
  height: 50px;
  line-height: 50px;
  width: 50px;
  font-size: 20px;
  background: #664AFF;
  color: #fff;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: #fff;
  cursor: pointer;
  transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .cancel-icon.active{
  right: -40px;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .search-data{
  text-align: center;
  padding-top: 7px;
  color: #fff;
  font-size: 18px;
  word-wrap: break-word;
}
.search-box .search-data.active{
  display: none;
}

That’s all, now you’ve successfully created an Animated Search Box using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Full Screen Search Bar Animation using HTML CSS & JavaScript

CodingNepal — Sat, 01 Aug 2020 06:04:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Full-Screen Bar Animation using HTML CSS & JavaScript. Earlier I’ve shared a blog on how to create a Responsive Navbar with Search Box using HTML & CSS. And now I’m going to create a Full-Screen Search Bar Animation.

A search box, search field, or search bar is a graphical element present in computer programs, such as file managers or web browsers, and on websites. It works as the field for a query input or searches term from the user to search and retrieve related data from the database.

In this program (Full Screen Search Bar Animation), at first, on the webpage, there is only a Search Icon or Search Button but when you click on that button then the webpage screen fills with gradient background color and show the search input field with smooth expanding animation at the center of the webpage. There are also shown the search icon for the search and cancel button to cancel that search page.

This search field is created only for design purposes so this program won’t retrieve any data or information when you entered some information and search. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Full Screen Search Bar Animation).

Video Tutorial of Full Screen Search Bar Animation

In the video, you’ve seen the actual animation of this Full-screen Search Bar program and I hope you’ve understood the basic codes behind creating this program. I used jQuery instead of JavaScript because jQuery reduces the JavaScript codes. If you know PHP/Mysqli then you can add some codes to this program and can retrieve data from the database on a particular search topic.

If you like this program (Full Screen Search Bar Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Full-Screen Search Bar Animation [Source Codes]

To create this program (Full Screen Search Bar Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      FullScreen Search Box | CodingNepal
      
      
      
   
   
      
         
      
      
         
            
         
         
            
            
            Type to search..

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  position: relative;
  font-family: 'Poppins', sans-serif;
}
.wrapper, .search-data{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper{
  position: fixed;
  height: 0px;
  width: 0px;
  border-radius: 100%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transition: all 0.4s linear;
}
.wrapper.active{
  height: 4000px;
  width: 4000px;
}
.search-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60px;
  width: 60px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.search-btn span{
  color: #fff;
  font-size: 22px;
  line-height: 60px;
}
.search-data{
  position: absolute;
  height: 50px;
  width: 400px;
  display: flex;
  text-align: center;
  /* display: none; */
}
.search-data input{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
}
.search-data .line{
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  bottom: 0;
  transform: scaleX(0);
  transition: transform 0.4s 0.3s linear;
}
.search-data .line.active{
  transform: scaleX(1);
}
.search-data label{
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255,255,255,0.7);
}
.search-data input:valid ~ label{
  opacity: 0;
}
.search-data span{
  color: #fff;
  position: absolute;
  width: 50px;
  font-size: 25px;
  right: 0;
  top: 0;
  line-height: 45px;
  cursor: pointer;
}
.close-btn{
  position: absolute;
  z-index: 99;
  right: 25px;
  top: 25px;
  font-size: 25px;
  color: #fff;
  cursor: pointer;
}
.search-data, .search-data span,
.search-data label, .close-btn{
  display: none;
}

That’s all, now you’ve successfully created a Full-Screen Search Bar Animation using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Search Bar – CodingNepal

Create a Responsive Search Bar in HTML & CSS | Free Source Code

Create Search Bar in HTML & CSS | Video Tutorial

You May Like This:

Search Bar in HTML & CSS [Source Code]

Search Bar in HTML CSS & JavaScript

Search Bar in HTML CSS & JavaScript | Video Tutorial

You Might Like This:

Search Bar [Source Code]

Search Bar with Autocomplete Search Suggestions in JavaScript

Video Tutorial of Search Bar with Autocomplete Search

You might like this:

Search Bar with Auto-complete Search [Source Codes]

Animated Search Box using HTML CSS & JavaScript

Video Tutorial of Elastic Animation on Search Bar

You might like this:

Animated Search Box [Source Codes]

Full Screen Search Bar Animation using HTML CSS & JavaScript

Video Tutorial of Full Screen Search Bar Animation

You might like this:

Full-Screen Search Bar Animation [Source Codes]