.Gamer {
  align-self: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5 ease-in-out;

  &-nick {
    position: absolute;
    bottom: 0;
    font-size: 0.618em;
    line-height: 2.618em;
    left: 0;
    right: 0;
    text-align: center;
    color: #122934;
  }

  &-healthBarWrapper {
    display: block;
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 3px;
  }

  &-healthBar {
    background: green;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50%;
  }
}

.Gamer {
  align-self: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5 ease-in-out;

  &-nick {
    position: absolute;
    bottom: 0;
    font-size: 0.618em;
    line-height: 2.618em;
    left: 0;
    right: 0;
    text-align: center;
    color: #122934;
  }

  &-healthBarWrapper {
    display: block;
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 3px;
  }

  &-healthBar {
    transition: height 0.5s ease-in-out;
    background: green;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
  }
}

Add smooth transition to health bar
Add smooth transition to health bar
