I am trying to do a simple tweening of increasing the radius of circles whenever the mouse gets clicked over an svg canvas.
However, I am getting some jerking/choking on the tweening of the circles, and can't debug it why.
This problem only happens when I try to create another circle, before the ones that are currently being animated finishes.
Any help is greatly appreciated
Main function code is the following:
createCircle(evt) {
const { clientX: x, clientY: y } = evt
const id = `circle-${++this.lastCircleId}`
this.circles.push({ x, y, id })
Vue.nextTick(() => {
TweenLite.to(`#${id}`, 1, {
attr: { r: 50 },
onComplete: () => {
this.circles = this.circles.filter(circle => circle.id !== id)
},
})
})
},
CodeSandbox example: https://codesandbox.io/s/vue-template-j9my3?fontsize=14
P.S. Sorry I posted a CodeSandbox example instead of CodePen, but couldn't really get the CodePen to work with vue template syntax.
