Jump to content
GreenSock

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

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.

See the Pen by s (@s) on CodePen

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×