JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg"  width="200" height="100%" >
</svg>
<button id="button">Click</button>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#svg {
  position:absolute;
}

#button {
  margin-left:200px;
}

JavaScript

var s=Snap("#svg");
var rect=s.rect(0, 0, 100,600)
rect.attr({ 
fill:"#212121"
});

var animating = true;


function aniOn() {
  if (animating) {
    rect.animate({
      width: 400
    }, 1000, mina.elastic);
  };
}



function aniOff() {
  if (animating) {
    rect.animate({
      width: 100
    }, 1000, mina.elastic);
  };
}
rect.click(function() {
  animating = true;
  aniOn()
});

rect.mouseout(function() {
  animating = true;
  aniOff()
});


$("#button").click(function() {
  rect.trigger('click');
});