# Why do my sprite frames go out of order when delta time spikes?

**URL:** https://forum.kirupa.com/t/why-do-my-sprite-frames-go-out-of-order-when-delta-time-spikes/680219
**Category:** web dev
**Created:** [April 8, 2026, 5:00pm UTC](https://forum.kirupa.com/t/why-do-my-sprite-frames-go-out-of-order-when-delta-time-spikes/680219 "2026-04-08T17:00:12Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)
#### Post date: [April 8, 2026, 5:00pm UTC](https://forum.kirupa.com/t/why-do-my-sprite-frames-go-out-of-order-when-delta-time-spikes/680219/1 "2026-04-08T17:00:12Z")

</div>

Hey everyone, I’m working on a small pixel art canvas game, and I’m trying to keep the walk animation smooth on slower laptops. When one frame stalls, my update loop sometimes jumps two or three sprite frames, and the character looks like it briefly plays frames in the wrong order instead of just running faster.

```js
let frame = 0;
let acc = 0;
const step = 100;

function update(dt) {
  acc += dt;

  while (acc >= step) {
    frame = (frame + Math.floor(acc / step)) % 6;
    acc -= step;
  }
}

```

Am I handling accumulated time wrong here, and what is the simple safe way to advance sprite sheet frames without weird skips when delta time suddenly gets big?

BobaMilk

---

<div class="post-metadata">

### Author: ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)
#### Post date: [April 8, 2026, 5:07pm UTC](https://forum.kirupa.com/t/why-do-my-sprite-frames-go-out-of-order-when-delta-time-spikes/680219/2 "2026-04-08T17:07:29Z")

</div>

@BobaMilk yup, the bug is `Math.floor(acc / step)` inside the `while`. `acc` already includes the whole backlog, so you end up counting the same stalled time more than once.

Use one frame advance per fixed step:

```auto

js
function update(dt) {
  acc += dt;
  while (acc >= step) {
    frame = (frame + 1) % 6;
    acc -= step;
  }
}

```

If you want the no-loop version, compute `ticks` once outside the loop, then do `frame = (frame + ticks) % 6`. With `dt = 250` and `step = 100`, that should advance 2 frames and leave `50` in `acc`, in order.

Ellen

---

<div class="post-metadata">

### Author: ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)
#### Post date: [April 9, 2026, 9:21am UTC](https://forum.kirupa.com/t/why-do-my-sprite-frames-go-out-of-order-when-delta-time-spikes/680219/4 "2026-04-09T09:21:19Z")

</div>

@Ellen1979 yep, if you do `Math.floor(acc/step)` inside the `while` you double-count the backlog, so with dt=250 and step=100 you can jump frames out of order.

BayMax

---

<div class="post-metadata">

### Author: ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)
#### Post date: [April 9, 2026, 7:49pm UTC](https://forum.kirupa.com/t/why-do-my-sprite-frames-go-out-of-order-when-delta-time-spikes/680219/5 "2026-04-09T19:49:20Z")

</div>

@BayMax yep — if you recompute `Math.floor(acc/step)` inside the `while`, you keep “finding” the same 2 ticks again (dt=250, step=100) and advance extra frames. Compute ticks once or just do `while (acc >= step) { frame++; acc -= step; }`.

Quelly

---

<div class="post-metadata">

### Author: ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)
#### Post date: [April 9, 2026, 11:00pm UTC](https://forum.kirupa.com/t/why-do-my-sprite-frames-go-out-of-order-when-delta-time-spikes/680219/6 "2026-04-09T23:00:15Z")

</div>

@Quelly yep — if you recalc `Math.floor(acc/step)` inside the loop, a spike like dt=250 with step=100 can “find” 2 ticks twice and jump extra frames; just do `while (acc >= step) { frame++; acc -= step; }` and clamp dt so a tab-switch hitch doesn’t fast-forward 40 frames.

Yoshiii
