Studio Preview No frame

No timeline loaded.

Timeline 0 frames

Imported frames appear here. Click to select. Use Ctrl/Cmd and Shift for multi-select.

Animation Studio: put OLED frames in order and play them

An animation on a small display is just a list of pictures shown one after another, each for a set time. The Animation Studio is where that list is built: you collect frames from the Pixel Editor or the video converter, arrange them on a timeline, set how long each one stays on screen, preview the result, and export it as an animated GIF or as Arduino code that plays it on a real screen.

Frames are held in your browser. Save a draft or export JSON to keep your work. The sections below explain the timeline, the export, and how much memory an animation needs.

Getting frames into the studioFrom the editor, the video converter, or a saved file

From the Pixel Editor. Draw a frame and click the button that stages the canvas as an animation frame. Change the drawing and stage again for the next frame. Then open the studio and click Load Bridge.
From Video to Animation. Convert a clip, then choose Open in Anim Studio; the frames arrive the same way.
From a file. Import JSON reopens an animation you exported earlier.
From a draft. Save Draft keeps the timeline in this browser; Load Draft brings it back.

Every frame in one animation must have the same width and height. The studio refuses a mix, because the exported code draws every frame into the same screen area.

Working on the timelineSelecting, timing, reordering and transforming frames

Select a frame by clicking it. Hold Ctrl (or Cmd) to add frames one by one, or Shift to select a range.
Timing: type a Frame Duration in milliseconds and apply it to the selected frames or to all of them. A frame can be shown for up to 65,535 ms, because the export stores each duration in 16 bits.
Order: Duplicate, Delete, Move Left and Move Right edit the sequence. Trim to Sel keeps only the selected frames.
Transforms apply to every selected frame at once: invert, flip horizontally or vertically, and shift the picture one pixel left, right, up or down.
Preview with Play and Stop.

Key	Action
`Space`	Play or stop the preview
`←` / `→`	Select the previous or next frame
`Ctrl` + `A`	Select all frames
`Ctrl` + `D`	Duplicate the selected frame
`Delete` / `Backspace`	Delete the selected frame
`Esc`	Clear the selection

Frame rate and timing, in plain numbersConverting between frames per second and milliseconds

Frames per second and milliseconds per frame are the same idea said two ways: milliseconds per frame = 1000 ÷ frames per second.

Frames per second	Milliseconds per frame
5	200
8	125
10	100
12.5	80
20	50
24	41.7

A loop's length is the number of frames times the duration of each: 12 frames at 100 ms loop every 1.20 seconds, and so do 30 frames at 40 ms. The smoother version costs two and a half times the memory for the same length of loop.

Between 8 and 12 frames per second is a good starting point for a small OLED. Faster is not always possible, because every frame has to travel to the display over I2C. A 128 × 64 frame is 1024 bytes, and each byte takes 9 clock pulses (8 data bits and an acknowledge). At 400 kHz that is at least 23 ms per frame - at most 43 frames a second before the sketch does anything else. At the slower 100 kHz it is at least 92 ms, or about 11 frames a second.

What the Arduino export containsTwo files: the frames, and a sketch that plays them

Export Arduino .ino writes animation.h and animation.ino. The header holds the data:

#define ANIM_FRAME_COUNT  N
#define ANIM_FRAME_WIDTH  W
#define ANIM_FRAME_HEIGHT H
#define ANIM_FRAME_BYTES  B   // = ceil(W/8) * H
const uint16_t PROGMEM anim_delays_ms[N] = { ... };
const uint8_t PROGMEM anim_frames[N][B] = { ... };

and the sketch plays them for ever:

void loop() {
  for (uint16_t i = 0; i < ANIM_FRAME_COUNT; i++) {
    display.clearDisplay();
    display.drawBitmap(0, 0, anim_frames[i], SCREEN_WIDTH, SCREEN_HEIGHT, WHITE);
    display.display();
    delay(pgm_read_word(&anim_delays_ms[i]));
  }
}

(N, W, H and B are filled in with your numbers.) Both arrays are in PROGMEM, so they stay in flash. That is why the delay is read with pgm_read_word() rather than used directly: on AVR boards such as the Uno, flash has to be read with special instructions.

Export GIF is for sharing - a README, a slide, a message. The JSON export is the studio's own format, for opening the animation again later.

How long an animation can beMemory, frame by frame

Each frame costs (width ÷ 8, rounded up) × height bytes: 1024 bytes at 128 × 64, 512 at 128 × 32, and 384 at 64 × 48. An Arduino Uno has 32,256 bytes of flash for everything, including the display library.

If you can spare 20 KB (20,480 bytes) for the animation, that is 20 frames at 128 × 64, 40 at 128 × 32 or 53 at 64 × 48. Ways to fit more:

Animate a small area. A 64 × 48 icon costs 384 bytes a frame against 1024 for the full screen.
Hold frames longer instead of repeating identical ones: one frame at 400 ms costs the same memory as one at 100 ms.
Use a bigger board. An ESP32 has megabytes of flash, enough for long clips.

Related: draw frames in the Pixel Editor, or make them from a clip with Video to Animation. The Embedded C volume on time and timers explains why a loop built on delay() blocks everything else, and how to avoid it.