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

External CSS

  1. https://codepen.io/GreenSock/pen/xxmzBrw/fcaef74061bb7a76e5263dfc076c363e.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/MotionPathPlugin.min.js