Animation Live Update

GoJS
1

Hi GoJS team,

I’m working with go.Animation to animate strokeDashOffset on a Shape representing flow in a pipe. I want to dynamically adjust the animation speed when the value changes, and I’m trying to do this by updating the .duration property on the existing go.Animation instance.

My current setup looks like this:


const animation = new go.Animation();
animation.duration = initialSpeed;
animation.runCount = Infinity;
animation.add(strokeShape, "strokeDashOffset", 0, 20);
animation.start();

// Later, when the speed needs to change:
animation.duration = newSpeed;

However, updating animation.duration like this does not appear to affect the running animation. It continues at the original speed.

❓ My questions:

  1. Is it possible to update .duration on a running go.Animation instance?
  2. If not, is the correct pattern to stop and recreate the animation with the new duration?
  3. Is there a better way to create a smooth transition between speeds without restarting the animation and causing a visible jump?
2
  1. I do not believe that you can update the duration of a running animation.
  2. Yes, re-create the animation.
  3. I suspect the “jump” is caused by resetting the Shape.strokeDashOffset instead of using the value at the time the animation is stopped.
3

Hi Walter,

Thanks again for your help earlier!

As a follow-up, I’ve created a minimal repro here showing the challenge more clearly:

🔗 CodePen – Dynamic strokeDashOffset animation

✅ Goal:

Animate strokeDashOffset to simulate flow in a pipe, with the ability to dynamically update the speed (animation duration) at any time, based on live values.

🧪 What we’ve tried:

  • Stopping the current animation and starting a new one with the updated duration (which works).
  • Randomizing speed and the time of the update, to simulate a realistic stream of incoming updates.
  • Preserving the current strokeDashOffset before restarting to avoid full reset.

🧩 Remaining challenge:

Even when trying to capture the current strokeDashOffset and continuing from that value, a visible “jump” or reset often occurs, especially if the new animation doesn’t align smoothly with the previous offset.

We understand GoJS animations don’t offer hooks tied to cycle completion. But we’re wondering:

❓ Questions:

  1. Is there a better way to pause and resume strokeDashOffset animations without a visible jump?
  2. Is there a way to read or sync with the internal progress/cycle of an infinite go.Animation?

We’ve tried approximating smooth transitions by watching strokeDashOffset manually and only restarting when near 0, but it adds a lot of complexity.

Any suggestions to make this smoother would be greatly appreciated!

4

Thanks for the sample.
We’ll look into this when we have a chance to investigate.

5

You’ve got 99% of it, all you really need to do is make sure that the new animation starts exactly where the old one leaves off. So instead of animating from 0 to some stroke dash value, you always want to animate to the current value, plus a consistent offset. So not this:

animation.add(shape, "strokeDashOffset", 0, dashLength);

Instead do:

animation.add(
  shape,
  'strokeDashOffset',
  shape.strokeDashOffset,
  shape.strokeDashOffset + dashLength
);

In another place you are resetting the strokeDashOffset back to zero, you need to remove that also.

Here’s the example I was playing around with, based on yours: https://codepen.io/simonsarris/pen/MYwzrPG

I replaced the randomization with 4 buttons, just for testing. You can see that repeatedly clicking any of the buttons (like 2000) won’t jitter any more.

6

You may also want to modulo the start value so that it doesn’t constantly increase:

animation.add(
  shape,
  'strokeDashOffset',
  shape.strokeDashOffset % dashLength,
  (shape.strokeDashOffset % dashLength) + dashLength
);

should do it