<main>
  <div>
    <div class="box gradient-green" id="box-1"></div>
  <p>curviness: 0</p>
  </div>
  <div>
    <div class="box gradient-green" id="box-2"></div>
     <p>curviness: 2</p>
  </div>
	
	
</main>

main {
  text-align: center;
	width: 100%; min-height: 100vh;
	display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center;
}

main div {
  display:flex;align-items:center;justify-content:center;flex-direction: column;
}
.box {
  will-change: transform;
  margin-bottom: 2rem;
}

var scales = [{scale:1.3}, {scale:0.2},	{scale:1}];

gsap.to('#box-1', {
	motionPath: {
		path: scales, 
		curviness: 0
	}, 
	duration: 3, 
	ease: "none",
	repeat: -1,
	repeatDelay: 1
});

gsap.to('#box-2', {
	motionPath: {
		path: scales, 
		curviness: 2
	}, 
	duration: 3, 
	ease: "none",
	repeat: -1,
	repeatDelay: 1
});