<div class="feature" id="featureAnimation">
  <div id="featureBackground"></div>
</div>
body {
  background-color:#333;
}

#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.
*/

let dots = [],
	bg = document.querySelector("#featureBackground"),
	i, dot;

// create 80 dot elements and put them in an array
for (i = 0; i < 80; i++) {
	dot = document.createElement("div");
	dot.setAttribute("class", "dot");
	bg.appendChild(dot);
	dots.push(dot);
}

//set the initial position of all the dots, and pick a random color for each from an array of colors
gsap.set(dots, {
	backgroundColor: "random([#663399,#84d100,#cc9900,#0066cc,#993333])",
  scale: "random(0.4, 1)",
	x:400,
	y:300
});

// create the physics2D animation
let tween = gsap.to(dots, {
		duration: 2.5,
		physics2D: {
			velocity: "random(200, 650)",
			angle: "random(250, 290)",
			gravity: 500
		},
		delay: "random(0, 2.5)"
	});


GSDevTools.create({
	animation: tween,
	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://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js?r=20