Extract frame-by-frame data from animated GIFs and convert to JSON format. Perfect for building custom animation players, analyzing frame timing, or reconstructing animations in web applications.
Upload GIF File
Convert your GIF to JSON format with frame data
Live preview of individual frames as they're extracted from your GIF
Real-time progress bar showing extraction and conversion status
Preview the generated JSON structure before downloading
Multiple export formats with customizable quality settings
{
"width": 300,
"height": 200,
"frameCount": 12,
"duration": 1200,
"frames": [
{
"index": 0,
"delay": 100,
"image": "data:image/png;base64,...",
"width": 300,
"height": 200,
"x": 0,
"y": 0
}
// ... more frames
]
}// Animate frames on canvas
const gifData = await fetch('frames.json');
let currentFrame = 0;
function animate() {
const frame = gifData.frames[currentFrame];
const img = new Image();
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, frame.x, frame.y);
currentFrame = (currentFrame + 1) % gifData.frameCount;
setTimeout(animate, frame.delay);
};
img.src = frame.image;
}
animate();