DEV Community

Cover image for Microinteractions: Password Validation Animation

Posted on

Microinteractions: Password Validation Animation

What is a micro-interaction?

They are small animations that let the user know something has happened or is happening. They are a great way to improve the user experience (UX) in your user interface (UI).

Today we are going to build an animation inspired by @frontendjoe, who collaborated with Miriam Isaac on Instagram to break down the password validator. Here we see a textbox next to a button, and when clicked, fills the element and reveals a validation message.

Input Animation

Now, they built this in Vue. We are going to recreate it using vanilla JavaScript.

Ok, so let's get started.


The HTML is pretty simple:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Micro Interaction Password Input</title>
    <link rel="stylesheet" href="style.css" />
    <div class="wrapper">
      <input type="password" id="password" />
      <button class="eye">
        <i id="openEye" class="far fa-eye hide"></i>
        <i id="closeEye" class="far fa-eye-slash"></i>
      <button class="action" data-content="">
        <i id="arrow" class="fas fa-arrow-right"></i>
        <i id="check" class="fas fa-check hide"></i>
        <i id="times" class="fas fa-times hide"></i>

    <script src=""></script>
    <script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode


The CSS is where a lot of the magic happens. We are going to use custom properties (variables) to change the scale, opacity, and color of various elements. The main reason for this is so that we can manipulate the pseudo elements in JavaScript. Since these are not technically part of the DOM, we cannot select them directly in JavaScript.

:root {
  --scale: scaleX(0);
  --opacity: 0;
  --color: #0069df;

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  font-size: 2rem;
  background-color: #e2f1ff;

button:focus {
  border: none;
  outline: none;
  font-size: inherit;

.wrapper {
  position: relative;
  border: 2px solid var(--color);
  border-radius: 10px;
  padding-left: 10px;
  box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.3);
  transition: border-color 0.75s;

input {
  display: inline;
  font-size: inherit;
  border: none;
  outline: none;
  background-color: transparent;

.eye {
  display: inline-block;
  background-color: transparent;
  padding: 5px;
  width: 50px;
  cursor: pointer;

.action {
  display: inline-block;
  padding: 20px;
  width: 100px;
  background: var(--color);
  color: white;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background 0.75s;
.action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: 5px 0 0 5px;
  width: calc(100% - 99px);
  height: 100%;
  transform: var(--scale);
  transform-origin: right;
  transition: transform 0.75s;
.action::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 4.5rem;
  width: 100%;
  height: 100%;
  transform: var(--scale);
  opacity: var(--opacity);
  transition: opacity 1s;

.hide {
  position: absolute;
  opacity: 0;
Enter fullscreen mode Exit fullscreen mode


For the JavaScript, we will select all of the DOM elements that we will interact with. Then we will use the root documentElement to change our custom properties in CSS. This will allow us to animate the pseudo elements along with changing the color of all of the elements based on the password validation.

The password validation in this example is simply checking to see if the password is equal to "password". If it is false then the color is changed to red, the icon is changed to "X", and the message displayed is "Invalid Password". If it is true then the color is changed to green, the icon is chaned to "check mark", and the message displayed is "Welcome Back".

We also implement the ability to reveal the password entered by toggling the input from a type of "password" to a type of "text".

We keep track of the states of the application by using variables.

const action = document.querySelector(".action");
const eye = document.querySelector(".eye");
let open = false;
let showPwd = false;

action.addEventListener("click", () => {
  const root = document.documentElement;
  const arrow = document.getElementById("arrow");
  const check = document.getElementById("check");
  const times = document.getElementById("times");
  const password = document.getElementById("password");


  if (open) {"--color", "#0069df"); // blue"--scale", "scaleX(0)");"--opacity", 0);
  } else {
    if (password.value === "password") {
      action.dataset.content = "Welcome Back";"--color", "#00b692"); // green
    } else {
      action.dataset.content = "Invalid Password";"--color", "#fa394e"); // red
    }"--scale", "scaleX(1)");"--opacity", 1);
  open = !open;

eye.addEventListener("click", () => {
  const password = document.getElementById("password");
  const openEye = document.getElementById("openEye");
  const closeEye = document.getElementById("closeEye");


  if (showPwd) {
    password.setAttribute("type", "password");
  } else {
    password.setAttribute("type", "text");

  showPwd = !showPwd;
Enter fullscreen mode Exit fullscreen mode

Watch the full video here:

If you are interested in more content like this, feel free to subscribe to my YouTube channel.

Thanks for reading!

Say Hello! YouTube | Instagram | Twitter

Top comments (1)

tcip profile image
Mikael Elmblad

Cool. But most ppl don't click on the button. They use Enter key to send the input.