PaperJS Tween timeline

paperjs-tween-timeline.js

var c=new Shape.Circle({
    radius:30,
    fillColor:"red",
    position:[70,70]
})

var keys=[
]

var motionPath=new Path({
    strokeWidth:4,
    strokeColor:"#FF0000",
    selectedColor:"#FF0000",
    dashArray:[2,6],
    opacity:0.5
})



class Timeline {
    constructor(){
        this.currentKey=0
        this.loop=true
    }
    animate(elem,idx){
        if(idx<keys.length){
            elem.tween(keys[idx][0],keys[idx][1]).then(
                () => {
                this.animate(elem,this.currentKey++)
                })
        }
        else{
            if(this.loop){
                this.currentKey=0
                this.animate(elem,0)
            }
        }
    }
}


var tl = new Timeline()

function onMouseDown(e){
    motionPath.add(e.point)
    motionPath
    .segments[motionPath.segments.length-1]
    .selected=true
    c.position=e.point
    keys.push([
        {
            position: e.point,
            fillColor: Math.random(),
            radius: 5+Math.random()*50
        }, 
        {
            duration:500,
            easing:'easeInOutCubic'
        },
    ])
    if(e.count==0){
        tl.animate(c,0)
    }
}