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