JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div>
  <span class="dot"></span>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

div {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transform: scale(1);
  transition: scale ease .5s;
}

JavaScript

$("html")
  .mouseup(function() {
    clearInterval(intervall);
  })
  .mousedown(function() {
    var zoom = 1;
    intervall = setInterval(function() {
    	$(".test").html("w");
      zoom += 0.01;
      $(".dot").css("transform", "scale(" + zoom + ")");
    }, 10);
  });