Creating a Seamless Search Bar Transition Animation in HTML, CSS, and JavaScript

Understanding the Problem Statement

In today’s digital age, a seamless user experience is crucial for any application. One of the key elements that contribute to this experience is the animation and transition between different parts of the UI. In this article, we’ll delve into the world of search bar transitions and explore how we can achieve a similar effect to the popular “contacts” app.

Introduction to Search Bar Transitions

A search bar transition refers to the visual effect that occurs when the user interacts with a search bar. This interaction can be in the form of clicking on a button next to the search bar, clicking directly on the search bar itself, or sometimes even using gestures like swiping from the left side of the screen.

The goal of these transitions is to create an engaging and intuitive experience for the user. By smoothly animating the search bar’s position, size, and visibility, we can draw attention to this element and make it feel like a central part of our application.

The “Contacts” App Transition

For those unfamiliar with the “contacts” app, it’s likely a mobile application used for managing contacts. One distinctive feature of this app is its search bar transition animation. When the user clicks on the search button or navigates to the search page directly, the search bar appears from the left side of the screen and grows in size.

This type of transition creates a sense of movement and energy, drawing the user’s attention to the search functionality. In this article, we’ll explore how we can achieve similar transitions for our own search bars.

Setting Up the Search Bar

Before we dive into the animation, let’s set up the basic structure of our search bar in HTML and CSS.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Bar Transition</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <button id="search-button">Search</button>
        <input type="text" id="search-input" placeholder="Search...">
    </nav>

    <script src="script.js"></script>
</body>
</html>

/* styles.css */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#search-button, #search-input {
    display: inline-block;
    vertical-align: middle;
}

#search-input {
    padding: 10px;
    border: none;
    border-radius: 5px;
}

// script.js
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');

searchButton.addEventListener('click', () => {
    // Code for search bar transition goes here
});

The Animation

The key to creating a smooth search bar transition is to use a combination of CSS and JavaScript. We’ll break down the animation into several steps:

Step 1: Animate the Search Bar’s Position

When the user clicks on the search button, we want the search bar to slide in from the left side of the screen.

#search-input {
    opacity: 0;
    transform: translateX(-100%);
}

In our CSS, we set the opacity to 0 and the transform property to translateX(-100%), which moves the search bar 100 pixels to the left of its initial position. This creates a sense of depth and distance.

// script.js
searchButton.addEventListener('click', () => {
    const searchInput = document.getElementById('search-input');
    searchInput.style.opacity = '1';
    searchInput.style.transform = 'translateX(0)';
});

In our JavaScript, we update the style attribute of the search bar to set its opacity to 1 and transform to translateX(0), which resets it to its initial position.

Step 2: Animate the Search Bar’s Size

As the search bar appears from the left side of the screen, we also want it to grow in size.

#search-input {
    width: 300px;
    height: 40px;
}

#search-input.expanded {
    width: 300px;
    height: 60px;
}

In our CSS, we define two states for the search bar: expanded and non-expanded. When the search bar is in its expanded state, it has a larger width and height.

// script.js
searchButton.addEventListener('click', () => {
    const searchInput = document.getElementById('search-input');
    searchInput.classList.add('expanded');
});

In our JavaScript, we use the classList method to add the expanded class to the search bar.

Step 3: Add the Final Touches

To create a more polished look, we can add some final touches to our animation.

.expanded {
    transition: width 0.5s, height 0.5s;
}

#search-input.expanded::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #333;
    width: 20px;
    height: 20px;
}

In our CSS, we define the expanded class with a transition effect for the width and height properties. We also add some pseudo-element to create a subtle animation for the search bar’s corners.

Putting it All Together

Now that we’ve covered each step of the search bar transition, let’s put everything together in our final code.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Bar Transition</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <button id="search-button">Search</button>
        <input type="text" id="search-input" placeholder="Search...">
    </nav>

    <script src="script.js"></script>
</body>
</html>

/* styles.css */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#search-button, #search-input {
    display: inline-block;
    vertical-align: middle;
}

#search-input {
    padding: 10px;
    border: none;
    border-radius: 5px;
    opacity: 0;
    transform: translateX(-100%);
}

.expanded {
    transition: width 0.5s, height 0.5s;
}

#search-input.expanded::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #333;
    width: 20px;
    height: 20px;
}

// script.js
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');

searchButton.addEventListener('click', () => {
    searchInput.classList.add('expanded');
});

document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('search-input');
});

With this final code, we’ve successfully created a seamless search bar transition animation that resembles the popular “contacts” app.

Last modified on 2024-03-24