Social Media Icons - mojs

index.html

<div class="main">
  <div class="notice" id="main-notice">
    Turn your sound on and click an icon!
  </div>
  <div class="content">
    <div id="circle1" data-note="c" class="circle"><i class="fa fa-facebook-square" aria-hidden="true"></i></div>
    <div id="circle2" data-note="c-sharp" class="circle"><i class="fa fa-twitter-square" aria-hidden="true"></i></div>
    <div id="circle3" data-note="d" class="circle"><i class="fa fa-instagram" aria-hidden="true"></i></div>
    <div id="circle4" data-note="e" class="circle"><i class="fa fa-google-plus-square" aria-hidden="true"></i></div>
    <div id="circle5" data-note="e-flat" class="circle"><i class="fa fa-linkedin-square" aria-hidden="true"></i></div>
  </div>
</div>

script.babel

var ping = new Audio('http://tmp.janustech.net/notes/pin.mp3');
var timelines = {};

$('.content .circle').each(function() {
  var $this = $(this);
  var id = '#' + $this.attr('id');
  var tl = new mojs.Timeline();

  const circle = new mojs.Html({
    el: id,
    left: '50%',
    top: '50%',
    scale: {
      1: 0
    },
    duration: 500,
    easing: 'cubic.out'
  }).then({
    scale: {
      0: 1,
      duration: 500
    }
  });
  
  const burst = new mojs.Burst({
    parent: id,
    radius: {
      0: 200
    },
    count: 7,
    children: {
      fill: {'cyan' : 'yellow'},
      radius: 10,
      duration: 2000
    }
  });

  tl.add(circle, burst);

  timelines[$this.attr('id')] = tl;
});

var stopX = $('#main-notice').parent().width();

stopX += $('#main-notice').width() / 2 - 100;

const notice = new mojs.Html({
  el: '#main-notice',
  x: {
    0: 1000
  },
  duration: 2000,
  easing: 'cubic.in'
});

notice.play();

//new MojsPlayer({ add: notice });

$('.circle').on('click', function(e) {
  var tl = timelines[$(this).attr('id')];
  
  ping.play();
  tl.replay();
});

scripts

<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
<script src="http://cdn.jsdelivr.net/mojs-curve-editor/latest/mojs-curve-editor.min.js"></script>
<script src="http://cdn.jsdelivr.net/mojs-player/latest/mojs-player.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://use.fontawesome.com/571406dd14.js"></script>

social-media-icons-mojs.markdown

Social Media Icons - mojs

A Pen by Mark Biek on CodePen.

License.

style.less

@primary: #8d79ae;
@secondary: #83478b;
@tertiary: #080d3b;

.circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: @secondary;
  margin-right: 15px;
  text-align: center;
  color: white;
  line-height: 50px;
  font-size: 28px;
}

body {
  background: @primary;
}

.main {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .notice {
    display: none;
    position: absolute;
    top: 10px;
    left: -1000px;
    width: 500px;
    height: 30px;
    padding: 5px;
    text-align: center;
    font-family: 'Shrikhand', cursive;
    font-size: 22px;
    border: 3px solid black;
  }
  
  .content {
    width: 50vw;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: @tertiary;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet" />