Discover the white circle search bar display

I am attempting to implement a circular reveal animation to display the search toolbar in my web application using CSS and JavaScript. My goal is to achieve a similar effect as seen on Whatsapp for Android.

https://i.sstatic.net/YE242.jpg I have successfully created an expanding circle animation. If you view the demonstration, you will see that I defined the final width and height of the circle and utilized 

transform: scale(0.0033) to scale(1)
to prevent blurriness. However, I am encountering certain issues:

  1. Unable to make the circle expand from the search icon.
  2. The back icon and search input are not visible when the circle enlarges. My approach involves covering the content with a div that moves to the left simultaneously with the expanding circle revealing the content.
  3. On mobile devices, the search does not expand from the same position as on a PC.
  4. The circle fails to cover the entire toolbar.

I have tried various techniques and conducted extensive research online without any success. I believe that professional developers and coders here can offer superior solutions to my problem. This is the

DEMO

website for your reference.

javascriptcssanimation

Answer №1

Simulating the WhatsApp search feature is not as challenging as it may seem.

Check out this example:

https://jsfiddle.net/janedoe/8uYm94Zc/

With a few extra lines of code, you can achieve an even better result.

HTML

<div class="navbar">
  <div class="container">
    <h1>WhatsApp</h1>
    <button id='search'>
      <i class="fa fa-search" aria-hidden="true"></i>
    </button>
    <div class="input-mask">
      <input type="text" placeholder="Search">
    </div>
  </div>
</div>

CSS

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}
.navbar {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background: #009688;
  overflow: hidden;
}

.container {
  position: relative;
  width: 100%;
  height: 0;
}

h1 {
  position: absolute;
  width: 300px;
  height: 60px;
  margin: 0;
  top: 15px;
  left: 15px;
  font: normal 24px Arial, Verdana;
  color: #fff;
}

button {
  position: absolute;
  top: 10px;
  right: 15px;
  border: 0;
  background: 0;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  outline: 0;
}

.input-mask {
  position: absolute;
  top: 30px;
  right: -30px;
  display: flex;
  align-items: center;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  transition: all ease .6s;
}

input {
  position: absolute;
  right: 0;
  height: 60px;
  border: 0;
  font-size: 20px;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}

JavaScript

const search = document.querySelector('#search');
const input = document.querySelector('.container input');
const inputMask = document.querySelector('.input-mask');

const screenW = document.documentElement.clientWidth;

input.style.width = screenW + 'px';

search.addEventListener('click', (e) => {
    inputMask.setAttribute('style', 'width: ' + Number(screenW+30) + 'px; height: ' + screenW + 'px; top: -' + screenW/2 + 'px; padding-top: 30px; right: -3px;');
  input.focus();
});

input.addEventListener('blur', (e) => {
  inputMask.setAttribute('style', 'width: 0; height: 0; top: 30px;');
  input.value = '';
});

Answer №2

Discovered the answer and successfully implemented it on my website . My solution involved utilizing the CSS property clip-path.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for changing the order of a child element within a parent element that is positioned above its own parent element

I have a unique setup with two parent elements, one black and one red. Each parent element contains its own child element - the black parent has a gray div child, while the red parent has a pink div child. There are some constraints to consider: I am no ...

htmlcss

Is there a reason why async functions do not function properly within a controller's get() handler?

Utilizing Node and Express along with the mssql npm package, I establish a connection to an SQL Server database in my app.js file by setting up a global variable that creates a connectionPool (I've excluded some boilerplate code for brevity): const m ...

javascriptnode.jsexpressnode-mssql

The logo appears perfectly sized in CodePen, but it seems oversized in the Outlook email template

My email template (HTML with inline CSS) features a logo with a fixed width and height (px). Oddly, after receiving an email using this template, the logo expanded to fill the entire page width. I attempted to add !Important to the width and height propert ...

htmlcssemailoutlookhtml-email

What is the reason AJAX does not prevent page from refreshing?

Can anyone offer some guidance on using AJAX in Django? I'm attempting to create a basic form with two inputs and send the data to my Python backend without refreshing the page. Below is the AJAX code I am using: <script type="text/javascript& ...

javascripthtmldjangoajax

Exploring the transition from the login screen to the home screen in React Native with the help of React Navigation

Currently, I am working on a small app using react native. As I am not very familiar with react, I would appreciate any help I can get. My main objective is to implement react navigation in the app, specifically redirecting authenticated users to the home ...

javascriptreact-nativenavigationstack-navigator

ExpressJs does not support query parameters with the router.get method

I am currently working on developing an Express app. Here is the code snippet I am using: const express = require("express"); const router = express.Router(); router.get("/:id", ControllerHandler(UserController.getSingle, GetUserReque ...

javascriptnode.jsexpress

ClassSerializerInterceptor in NestJS does not show the _id field

I am encountering an issue with properly exposing the _id when using the Serializer. Here is my current setup: @UseInterceptors(ClassSerializerInterceptor) @SerializeOptions({ strategy: 'excludeAll' }) This is how I defined the Class: export cl ...

javascriptnode.jsmongodbmongoosenestjs

Javascript: Troubleshooting Unexpected Variable Behavior in HTML Code

My issue is as follows: I am attempting to retrieve text from a JSON file in my HTML. In the header of my HTML, I have linked a tag with the following code: var language = ""; var langDoc = null; //Function to change the value function setLang() { v ...

javascripthtmljsonvariablesnull

The function Slice() does not function properly when used with two-dimensional arrays

I have been attempting to duplicate a 2D array by value using the slice() method in order to prevent any changes made to the new array from impacting the original. Oddly enough, it seems that this approach is effective with a 1-dimensional array but not wi ...

javascriptarraysslice

Adjusting layout once image has been removed from view

I am working on a code where I want to hide an image on small screens and center the input fields when the screen size is XS. I have tried adjusting the Bootstrap 4 flex settings without success. Is there a way to achieve this using Bootstrap or SASS? & ...

csssassbootstrap-4

Acquire Formik Validation for the Current Year and Beyond

How can I ensure that the input in Formik is restricted to the currentYear and later years only? const currentYear = new Date().getFullYear(); expiryYear: yup .string() .required('Please select an expiry year') .min(4, `Year format must be grea ...

javascriptreactjsmaterial-uiformikyup

The functionality of Google Maps' WatchPosition feature seems to be malfunctioning

One of the functionalities I'm working on involves tracking the user's position. First, I use getCurrentLocation to retrieve the user's location coordinates and then place a marker on the map to indicate their location (the marker variable i ...

javascriptangularjsgoogle-mapsionic-frameworkgoogle-maps-markers

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

Struggling with writing a Vue component, encountering the issue: Failed to mount component: template or render function not defined. Tried various fixes like adding default when importing the component, but none of them seem to work. My component code is i ...

javascriptvue.jsvue-componentvuex

Step-by-step guide on mocking an asynchronous function in nodejs with jest

Within this function, I need to mock the httpGet function so that instead of calling the actual function and returning its value, it will call a simulated function fetchStudents: async(req,classId) => { let response = await httpGet(req); return r ...

javascriptnode.jsunit-testingmockingjestjs

A footer that remains in place but is surrounded by multiple containers with identical classes

I recently acquired a website with a div layout that is unfamiliar to me: <html> <body> <div class="wrap">...</div> <nav>...</nav> <div class="wrap">...<!-- main stuff -->...</ ...

htmlcss

Having trouble with a beginner problem that's hindering the functionality of my code

I have been struggling with a particular piece of code and it is driving me crazy as I am unable to locate the source of my error: $.post($form.attr('action'), $form.serialize(), function (result) { console.log(result); if (result.succes ...

javascriptjqueryajax

Error will be thrown if the initialDueDate parameter is deemed invalid in Javascript

Can someone help me improve the calculateNextDueDate function which takes an initialDueDate and an interval to return the next due date? I want to add argument validation to this function. Any suggestions would be greatly appreciated. Thank you! const I ...

javascriptnode.jsdatemomentjs

Encountering issues with $.AJAX post in JavaScript, while successful in Advanced Rest Client

My JavaScript code is facing an issue when trying to communicate with the HttpPost service. Interestingly, I can access the same endpoint using the "Advanced Rest Client Application" for Chrome without any problems. However, when I execute my code in the C ...

javascriptjqueryajaxresthttp-post

Clicking on the LI element will automatically trigger a click event on the input radio button

Whenever I click on an li element, I want the corresponding radio input to be selected. However, when I try to do this, I'm seeing an error in the console log: Uncaught RangeError: Maximum call stack size exceeded How can I resolve this issue? Bel ...

javascriptjquery

Navigating with React Router: Maintaining user data persistence during route changes

As I develop a React Router application, my focus is on mastering authentication. Here is an overview of the key components: Login component (login.jsx) Verifies user credentials on the backend Saves the authentication token in local storage Returns t ...

javascriptreactjsreact-routerbasic-authenticationreact-props