Long Animation Frames - Interactive Lab | IconVault
Capture real long-animation-frame entries with per-script attribution, see what blocks frames, and learn the INP connection.
Long Animation Frames
LoAF visualizer with script attribution and INP link
Long Animation Frames are not supported in this browser
The LoAF API needs Chrome 123+, Edge 123+ or Opera 109+. The detection snippet below still works as a drop-in for your own site, and the explanation of the INP link applies everywhere.
Captured frames (0)
Why LoAF matters for INP
INP measures how long the page takes to respond to an interaction. A LoAF tells you exactly which script blocked the frame and who invoked it (a click handler, a timer, a rAF callback). Fix the attributed script, usually by splitting the work with scheduler.yield() or moving it off the main thread, and INP drops with it.
// Detect Long Animation Frames with script attribution
if ("PerformanceObserver" in window) {
const supported = PerformanceObserver.supportedEntryTypes || [];
if (supported.includes("long-animation-frame")) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const loaf = entry; // PerformanceEventTiming-like
console.log("LoAF:", Math.round(loaf.duration), "ms");
for (const script of loaf.scripts) {
console.log(" script:", script.name || "(inline)",
"| invoker:", script.invoker,
"| blocked:", Math.round(script.duration), "ms");
}
}
});
observer.observe({ type: "long-animation-frame", buffered: true });
}
}5 of 5 free observation runs left. Runs fully in your browser.
About this tool
IconVault's Long Animation Frames lab puts Chrome's LoAF API in your hands. Start observing, trigger a smooth workload, a 220ms blocking task, or a forced layout thrash, and watch real long-animation-frame entries appear with their duration, render timing, and per-script attribution showing exactly which script blocked the frame and what invoked it. It is free and runs fully in your browser.
Each entry breaks down renderStart and styleAndLayoutStart so you can tell script work apart from rendering cost, and a running total blocking time connects the frames to what users feel. The explainer links LoAF directly to INP: fix the attributed script by splitting work with scheduler.yield() or moving it off the main thread, and your Interaction to Next Paint drops with it. A copyable detection snippet is included for your own site.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon