<div class="feature" id="featureAnimation">
  <div id="featureBackground"></div>
</div>

body {
  background-color:#555;
}

#featureAnimation {
  background-color:#000;
  height: 262px;
  overflow: hidden;
  position: relative;
  width: 800px;
  margin: auto;
}

.dot {
  position:absolute;
  background-color: #91e600;
  width:50px;
  height:50px;
  border-radius:50%;
}

/*
* See https://greensock.com/gsap/ for details about GSAP.
*/

var master = new TimelineMax(),
    bg = $("#featureBackground")
    
master.add(control())

function control() {
  var dots = new TimelineLite(),  
      qty = 80,
      duration = 2.5,
      colors = ["#91e600","#84d100","#73b403","#528003"];

  for (i = 0; i < qty; i++) {
    dot = $("<div class='dot'/>").appendTo(bg)[0];
    var color = colors[(Math.random() * colors.length) | 0];
    TweenLite.set(dot, {backgroundColor:color, x:400, y:300});
    delay = Math.random() * duration;
    dots.to(dot, duration, {physics2D:{velocity:Math.random() * 400 + 150, angle:Math.random() * 40 + 250, gravity:500}}, delay);
  }
  return dots;
}


GSDevTools.create({
  container:"#featureAnimation",
  minimal:true
});