<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
body {
  line-height: 0;
  background-color: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.box {
  width: 15vw;
  height: 15vw;
  aspect-ratio: 1 / 1;
  max-width: 50px;
  max-height: 50px;
  background-color: #88ce02;
  display: inline-block;
  margin: 2vw;
  border-radius: 3px;
}
gsap.to(".box", {
	keyframes: {
		y: [0, 80, -10, 30, 0],
		ease: "none", // <- ease across the entire set of keyframes (defaults to the one defined in the tween, or "none" if one isn't defined there)
		easeEach: "power2.inOut" // <- ease between each keyframe (defaults to "power1.inOut")
	},
	rotate: 180,
	ease: "elastic", // <- the "normal" part of the tween. In this case, it affects "rotate" because it's outside the keyframes
	duration: 5,
	stagger: 0.2
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://assets.codepen.io/16327/gsap-latest-beta.min.js