Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Vue nextTick and gsap tweening animation choking

Recommended Posts

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.

Share this post

Link to post
Share on other sites

Hey nunoh and welcome to the forums!


I am not familiar with Vue, but if you comment out the onComplete the circles all animate fine. It seems to be related to how you're clearing the circle from the array once it's completed. Maybe you can try a different method of deleting them from the array that doesn't mess up the index of other circles?

  • Like 4

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.