<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
});



External CSS

  1. https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js?r=20