JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image1">
  <img class="clip" src="http://www.astralissolutions.com/images/circle.png" />
  <div class="top fill"></div>
  <div class="left fill"></div>
  <div class="right fill"></div>
  <div class="bottom fill"></div>
</div>

CSS

.image1 {
  background-image: url(http://dale.olamz.com/wp-content/uploads/2018/02/cropped-Dale-Logo-377x120.jpg)
}

.image2 {
  background-image: url(http://dale.olamz.com/wp-content/uploads/2018/02/Lumber-300dpi.jpg)
}

body>div {
  background-position: center;
  width: 300px;
  height: 300px;
  position: relative;
}

img.clip {
  width: 100%;
  height: 100%;
  position: absolute;
}

div.fill {
  position: absolute;
  background-color: White;
}

div.left,
div.right {
  top: 0;
  height: 100%;
  width: 0
}

div.left {
  left: 0;
}

div.right {
  right: 0;
}

div.top,
div.bottom {
  width: 100%;
  left: 0;
  height: 0
}

div.top {
  top: 0;
}

div.bottom {
  bottom: 0;
}

JavaScript

var speed = 1000;

var adjust = ($.browser.msie && parseInt($.browser.version) <= 8) || $.browser.webkit ? 2 : 0;

$clip = $("img.clip");

$clip.animate({
  top: $clip.parent().height() / 2,
  left: $clip.parent().width() / 2,
  width: 0,
  height: 0
}, {
  duration: speed,
  step: function(now, fx) {
    switch (fx.prop) {
      case "top":
        $("div.top").css("height", now);
        $("div.bottom").css("height", now + adjust);
        break;
      case "left":
        $("div.left").css("width", now);
        $("div.right").css("width", now + adjust);
    }
  },
  complete: function() {
    $(this).parent().addClass("image2");

    $(this).animate({
      top: 0,
      left: 0,
      width: $(this).parent().width(),
      height: $(this).parent().height()
    }, {
      duration: speed,
      step: function(now, fx) {
        switch (fx.prop) {
          case "top":
            $("div.top").css("height", now);
            $("div.bottom").css("height", now + adjust);
            break;
          case "left":
            $("div.left").css("width", now);
            $("div.right").css("width", now + adjust);
        }
      },
      complete: function() {
        $("div > div, img").removeAttr("style");
      }
    });
  }
});