transition.duration and Promises.delay should be the same speed, but one is slower

Community Help
1

I have an animation that uses transition.duration to move a point and long a path. Both the point and the path have a duration of 100 ms between points. Both use the duration variable:
duration = 100

I also have a counter that starts at the same time and moves along a progress bar. It uses Promises.delay, with the delay also being 100 ms.

Both the animation and the progress ticker start at the some time (await visibility()), however, you’ll notice that the animation seems to run a bit faster and finishes several seconds before the progress bar and date do. I’m not sure why.

Note, while the date ticker shows the day, each day is actually comprised of 4 points (I’m using date formatting to only show the day and not the hour).

Any insights would be greatly appreciated.

Here is the notebook

2

No one has an idea why ? If I increase the counter on Promises.delay by 10% they roughly line up… but would much rather figure out why there is a difference…

3

I think it had something to do with the way I had my code for Promises.delay. When I switched to using Promises.tick, the timing matched with transition.duration. I will mark as solved.

4

When you use Promises.delay in addition to yield, the yield will add an extra animation frame (typically 1/60th of a second or about 17ms). Using Promises.tick will account for this because it will round to the nearest multiple since the UNIX epoch. You can also use Promises.when for more precise control, and D3 has a transition.end promise too.

5

Ah, well that explains it. I wasn’t aware of transition.end. Thanks!