CREATIVE WORKSPACE

Animation Studio

Motion path Grid Snap 10px Onion skinStage zoom

LIVE CANVAS

960 × 540Drag objects to animate · Arrow keys on canvas nudge selected layer100%

00:00.000/00:06.000

Zoom timeline 24 fps

Keyframe timeline

Click to seek · Drag diamonds to retime · Use left/right arrow keys to move a focused keyframe

TIMELINE

Using Animation Studio

Add shapes, text or an image, create keyframes and preview the motion. Save an editable JSON project before exporting a GIF, sprite sheet, still frame or supported video.

Video export is silent, real-time browser recording, not frame-exact offline encoding. Codec, frame, duration and memory limits vary by export mode. Imported raster GIF layers are displayed as a static image.

Choose a GIF, sprite sheet, still frame or animation project

Project JSON: preserve layers and keyframes for editing.

PNG: save the frame at the current timeline time.

GIF: create an animated image within the export's frame, size and memory limits.

Sprite-sheet ZIP: package the sheet image and JSON frame manifest for a separate animation pipeline.

Video: record silent real-time playback using a supported browser codec. This is not frame-exact offline encoding or an audio export.

Practice: move a shape between two keyframes

Add a shape and set its starting position at time zero.

Create a later keyframe with a different position. Use linear easing to examine a simple transition, then preview the motion.

Save project JSON before choosing a GIF, sprite sheet or video handoff.

This is an authored timeline exercise, not measured playback or a supplied media export.

Animation export questions

Why does the exported video have no sound?

This tool records its animation canvas without an audio track. If the finished piece needs sound, use a separate video editor and retain the original animation project.

Can I use an imported GIF as an animated layer?

Imported raster GIF layers display as static images in this workspace. Animate supported layer properties with keyframes instead. Export-mode limits and browser resources can also restrict the final output.