diff --git a/frontend/src/ts/utils/debounced-animation-frame.ts b/frontend/src/ts/utils/debounced-animation-frame.ts
new file mode 100644
index 000000000..afb60c3e9
--- /dev/null
+++ b/frontend/src/ts/utils/debounced-animation-frame.ts
@@ -0,0 +1,21 @@
+const pendingFrames = new Map<string, number>();
+
+export function requestDebouncedAnimationFrame(
+  frameId: string,
+  callback: () => void
+): void {
+  cancelIfPending(frameId);
+  const frame = requestAnimationFrame(() => {
+    pendingFrames.delete(frameId);
+    callback();
+  });
+  pendingFrames.set(frameId, frame);
+}
+
+function cancelIfPending(frameId: string): void {
+  const pending = pendingFrames.get(frameId);
+  if (pending !== undefined) {
+    cancelAnimationFrame(pending);
+    pendingFrames.delete(frameId);
+  }
+}