Jump to content


Adding onUpdate function fixes animation?

Recommended Posts

Here is a very weird one.

We have an animation that seems to break when the browser is resized.

Only a single circle of the 6 we loop thru to create the animation breaks.


Here's the kicker. The fix was to simply add an EMPTY `onUpdate` function:

  const explosionMovementAmount = Math.min(windowWidth, windowHeight) * 0.28;
  const explosionAngle = MathUtils.degToRad(60);
  metaballs.forEach((metaball, i) => {
      { x: () => metaballTarget.x, y: () => metaballTarget.y },
        x: () =>
          explosionMovementAmount * Math.sin(i * explosionAngle) +
        y: () =>
          explosionMovementAmount * Math.cos(i * explosionAngle) +
        immediateRender: false,
        onUpdate: function () {},
        ease: 'back.inOut',
        duration: 2,
        yoyo: true,
        repeat: 1,
        repeatDelay: 1,

Just simply adding that fixes the issue.


Here is what is looks like broken: 


And here is with the empty onUpdate that fixes things:





Link to comment
Share on other sites

That is interesting. Can you please create a minimal demo of the issue so that we can figure out exactly what is happening?

Link to comment
Share on other sites

:) I knew that would be the next question. However, its pretty tough with this example..... a lot of moving parts.

I'll see what I can do.

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.