# Why does my sprite animation sometimes skip frames after a state update?
**URL:** https://forum.kirupa.com/t/why-does-my-sprite-animation-sometimes-skip-frames-after-a-state-update/681119
**Category:** web dev
**Created:** [May 4, 2026, 7:00am UTC](https://forum.kirupa.com/t/why-does-my-sprite-animation-sometimes-skip-frames-after-a-state-update/681119 "2026-05-04T07:00:13Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)
#### Post date: [May 4, 2026, 7:00am UTC](https://forum.kirupa.com/t/why-does-my-sprite-animation-sometimes-skip-frames-after-a-state-update/681119/1 "2026-05-04T07:00:13Z")
Yo Kirupa folks, I’m wiring up a tiny pixel-art character preview in a React-ish UI and I’m trying to keep the animation smooth while state updates happen. Every once in a while it jumps a frame or stutters, and I’m worried I’m mixing DOM reads/writes and shared refs in a dumb way.
```js
let frame = 0;
let last = performance.now();
const frames = 8;
const fps = 12;
const state = { playing: true };
function tick(now) {
const dt = now - last;
if (state.playing && dt >= 1000 / fps) {
frame = (frame + Math.floor(dt / (1000 / fps))) % frames;
last = now;
el.style.backgroundPositionX = `${-frame * 32}px`;
el.dataset.frame = frame; // UI reads this elsewhere
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
```
If the UI reads `dataset.frame` and triggers a re-render sometimes, what’s a good pattern to avoid animation drift and random frame skips without bloating the architecture?
VaultBoy
---
### Author:  [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)
#### Post date: [May 4, 2026, 8:00am UTC](https://forum.kirupa.com/t/why-does-my-sprite-animation-sometimes-skip-frames-after-a-state-update/681119/2 "2026-05-04T08:00:27Z")
yeah, the skip is probably from `last = now` nuking the leftover time after a slow render. so when React hiccups, you catch up by jumping frames, but the timing gets a little weird after that.
i’d keep a tiny accumulator and only subtract whole frame steps, like `acc -= step` in a loop. and i wouldn’t use `dataset.frame` as the thing React reads from — keep `frame` in a ref or some tiny store and let the UI subscribe to that instead.
---
### Author:  [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)
#### Post date: [May 5, 2026, 2:49am UTC](https://forum.kirupa.com/t/why-does-my-sprite-animation-sometimes-skip-frames-after-a-state-update/681119/3 "2026-05-05T02:49:25Z")
That `Math. floor(dt / step)` “catch-up” is going to look like a skip no matter what when React stalls. I’m honestly not sure you even want catch-up here — have you tried clamping `dt` to at most one frame step so a single hiccup just slows the animation instead of jumping ahead? I found a related kirupa. com article that can help you go deeper into this topic: