FrameLoop feature guide
How the animation is built from your frames, and what every control changes.
Frame order
- Name
By frame name- Type
- default
- Description
Natural sort, so "frame 2" comes before "frame 10". Name frames with numbers for a predictable order.
- Name
By canvas position- Type
- rows
- Description
Frames are grouped into rows from top to bottom. A frame belongs to the current row when its top edge is within a third of the row's first frame height, then each row reads left to right.
- Name
By layer order- Type
- layers panel
- Description
The order in the layers panel, top to bottom.
Timing
Frame duration is how long each frame holds, from 20 to 60000 ms. A frame whose name ends in a number followed by "ms" uses that duration instead: "Intro 1200ms", "Hold 250 ms" and "hold_250MS" all work. The duration must end the name, so "Frame 1200ms copy" uses the global value.
Transitions play between frames and add to the total length. A 300 ms crossfade between four frames that each hold 500 ms gives a loop of 3.2 seconds. Set the transition to 0 ms for plain cuts.
Loop is Forever, Play once, or 2, 3, 5 or 10 times. When the animation loops, the last frame transitions back to the first, so the loop is seamless. With Play once there is no transition after the last frame.
Transitions
- Name
Cut- Type
- free
- Description
The next frame replaces the current one at once.
- Name
Crossfade- Type
- free
- Description
The two frames blend over the transition duration with an ease-in-out curve. The blend never dips in opacity, so transparent frames fade cleanly too.
- Name
Slide left- Type
- Pro
- Description
The current frame moves out to the left while the next one moves in from the right.
- Name
Slide up- Type
- Pro
- Description
The same, moving upwards.
Transitions are sampled at 25 steps per second, so a 300 ms transition adds 8 steps to the file.
Scale and frame size
Scale sets the export resolution: 0.5x for a smaller file, 1x for the design size, 2x (Pro) for retina screens. The animation takes the size of the first frame. Frames of another size are scaled to fit and centered, never stretched.
Background and transparency
The Background color fills transparent areas. WebM always uses it, because the video has no transparency. GIF and APNG use it unless Keep transparency is on:
- GIF transparency is on or off per pixel. Pixels that are less than half opaque become fully transparent, so soft shadows and anti-aliased edges against nothing look hard.
- APNG keeps full alpha, including soft edges and shadows.
GIF palette and dithering
A GIF holds at most 256 colors per frame. FrameLoop picks them with a median-cut quantizer.
- Name
One palette (smaller)- Type
- default
- Description
One set of colors for the whole animation, built from every step. Smaller files, and colors stay stable from frame to frame.
- Name
Per frame (truer colors)- Type
- option
- Description
Each step gets its own 256 colors. Better for animations whose frames have very different colors, at a slightly larger size.
- Name
Dithering- Type
- on by default
- Description
Floyd-Steinberg dithering mixes palette colors to smooth gradients and avoid banding. Turn it off for flat illustrations and UI, which gives smaller files and crisp flat areas.
Formats
- Name
Animated GIF- Type
- free
- Description
Plays everywhere, including email and chat apps. 256 colors per frame and on or off transparency.
- Name
APNG- Type
- Pro
- Description
A PNG that animates: full color, full alpha transparency and the loop count. Plays in all modern browsers. Apps that do not support animation show the first frame.
- Name
WebM video- Type
- Pro
- Description
Recorded from the composed frames in real time, so recording takes as long as the animation. Keep the plugin open until it finishes. With a loop count of 2 or more the video contains that many passes; Forever records one pass, ready to loop in a player.
Smart move (Pro)
When two consecutive frames both contain a direct child layer with the same name, smart move tweens it during the transition instead of fading the whole frame:
- The layer glides from its position in the first frame to its position in the second, and its size and opacity follow, with an ease-in-out curve over the transition duration.
- Everything else in the two frames crossfades underneath.
- Layers with the same name are paired in order, so the second "Dot" in one frame pairs with the second "Dot" in the next. Hidden layers and layers nested inside groups are not paired.
- Smart move works with every transition, including Cut: a pair with matching layers always gets the tween.
To do this, FrameLoop exports each matched layer on its own and the frame with those layers hidden. It changes visibility and opacity only during the export and restores them right after, even if something fails.
Preview and file size
Preview renders the frames and plays the composed animation in a loop. Changing the duration, transition, loop, background or palette updates it at once. Changing the selection, order, scale or smart move renders the frames again on the next Preview or Export. After encoding, the Download button shows the file name and its exact size.