Physics2D for GSAP 3 Demo (used in docs)

index.html

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

physics2d-for-gsap-3-demo-used-in-docs.markdown

Physics2D for GSAP 3 Demo (used in docs)

A Pen by HARUN PEHLİVAN on CodePen.

License.

script.js

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

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js?r=20"></script>

style.css

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%;
  will-change: transform;
}

styles

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />