JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="floating-share">
  <button class="float-trigger"><i class="fa fa-bars"></i></button>
  <ul class="share-items">
    <li><i class="fa fa-facebook"></i></li>
    <li><i class="fa fa-google-plus"></i></li>
    <li><i class="fa fa-linkedin"></i></li>
    <li><i class="fa fa-twitter"></i></li>
  </ul>
</div>

SCSS

.floating-share {
  position: relative;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
  button {
    z-index: 100;
  }
  .share-items {
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    li {
      transform: translate(-50%, -50%);
      transition: all 0.5s ease;
      opacity: 0;
      position: absolute;
    }
  }
}

@for $i from 1 through 4 {
  $delay: $i * 0.15;
  .floating-share .share-items.opened li:nth-child(#{$i}) {
    animation-delay: #{$delay}s;
  }
  .floating-share .share-items.closing li:nth-child(#{$i}) {
    animation-delay: #{$delay}s;
  }
}

.floating-share {
  .share-items.opened li {
    animation: show 0.3s ease forwards;
  }
}

.floating-share {
  .share-items.closing li {
    animation: hide 0.3s ease forwards;
  }
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

JavaScript

jQuery.fn.semiCircle = function(cx, cy, radius, radiusY, startDegrees, endDegrees) {
  if (radiusY === undefined) radiusY = radius;
  if (startDegrees === undefined) startDegrees = 0;
  if (endDegrees === undefined) endDegrees = 180;
  var startRadians = startDegrees * Math.PI / 180,
    endRadians = endDegrees * Math.PI / 180,
    stepRadians = (endRadians - startRadians) / (this.length - 1);
  return this.each(function(i) {
    var a = i * stepRadians + startRadians,
      x = Math.cos(a) * radius + cx,
      y = Math.sin(a) * radiusY + cy;
    $(this).css({
      left: x + 'px',
      top: y + 'px'
    });
  });
};

$('li').semiCircle(0, 0, 0, 0, 0, 0);

$('button').on('click', function() {
  if ($('.share-items').hasClass("opened")) {
    $('li').semiCircle(0, 0, 0, 0, 0, 0);
    $('.share-items').removeClass("opened");
    $('.share-items').addClass("closing");
    setTimeout(function() {
      $('.share-items').removeClass("closing");
    }, 1500);
  } else {
    $('li').semiCircle(0, 0, 100, 100, 180, 270);
    $('.share-items').addClass("opened");
    $('.share-items').removeClass("closing");
  }

});