JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<button class="move-me">Start animation</button>
<div class="circle"></div>

CSS

.circle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #EBC84E;
    border-radius: 100%;
    margin-top:50px;
    border:5px solid #ffffff;
}

JavaScript

var circleObject = $('.circle');

$('.move-me').on('click', function () {
    TweenMax.to(circleObject, 2, {
        bezier: {
            curviness: 2,
            type: 'thru',
            values: [
                {x:0, y:0},
                {x:122, y:122},
                {x:239, y:239},
                {x:300, y:300},
                {x:411, y:411},
                {x:533, y:533}
            ]
        },
        onUpdate: onAnimationUpdate,
        onUpdateScope: this,
        onUpdateParams: circleObject,
        ease: Linear.easeNone
    });
});

function onAnimationUpdate(circle){
    $(circle).clone().appendTo(document.body);
}