Animation and keyframes

Turn any Studio page into a short animation by posing its layers across a series of frames, then export it as MP4, WebM, GIF, animated SVG or Lottie. Bitgrain fills in the motion between poses for you, with the easing you choose for each step.

Animation in the Studio is pose based. You don't draw curves on a graph. You set up the page the way it should look at one moment, add a frame, move things to where they should be next, and Bitgrain tweens between the two. It is the same idea as keyframes in a video tool, but you work directly on the canvas.

Switching to animate mode

The top bar has a Design / Animate switch. Click Animate and a timeline bar opens along the bottom of the Studio.

If the active page has no timeline yet, switching to Animate creates one for it straight away.
If you move to a page that has no timeline, the bar says the page has no timeline yet. Click Start timeline to create one.
If no page is active, the bar asks you to select a page.

Each page has its own timeline. A multi-page project can have some animated pages and some still ones.

Click Design, or the X (Close animation) at the right of the timeline bar, to go back to normal editing. Your frames are kept.

The timeline bar

The top row of the bar holds playback and export:

Control	What it does
Play / Pause	Plays the animation on the canvas from the playhead.
Loop	Toggles looping. When on, the animation returns to the first frame and repeats.
Scrubber	Drag along it to move the playhead. Tick marks show where each frame starts.
Time readout	The playhead position in seconds.
Export	Opens the export panel.
X	Closes the timeline.

The second row shows the page name and a strip of frame thumbnails. Each thumbnail is a small live preview of that frame's pose. The first one is labelled Base, the rest are numbered. The dashed + tile at the end (Add frame) adds a new frame.

The third row holds the timing settings for the selected frame, and the fps setting for the page.

How frames work

The base frame

The Base frame is your design as it looks in Design mode. Every animation starts from it. When a new timeline is created it contains only the base frame, so nothing moves yet.

Adding a frame

Click + (Add frame). The new frame starts as a copy of the last frame's pose, becomes the selected frame, and the playhead jumps to it. A hint appears at the bottom right: move elements to pose this frame.

Posing a frame

With a numbered frame selected, anything you change on an animatable property is stored for that frame only. Drag a layer to a new spot, rotate it, fade it, recolor it or resize it, and the base design is left untouched.

Properties that can't be animated (for example the words inside a text layer) are changed on the layer itself, so the change shows in every frame.

Selecting and deleting frames

Click a thumbnail to select that frame. The playhead jumps to the moment the frame is reached. Hover over a numbered thumbnail and click the small X to delete it. The base frame can't be deleted.

What you can animate

Almost every visual property of a layer can change from frame to frame.

Group	Properties	How it moves
Position and size	x, y, width, height, rotation	Smooth tween
Appearance	opacity, corner radius, stroke width	Smooth tween
Type	font size, letter spacing, line height	Smooth tween
Auto layout	gap, padding	Smooth tween
Draw-on	the Draw-on percentage of vector and ink layers	Smooth tween
Colors	fill, stroke, stroke color, text color	Smooth color blend
Effects	image filters, Bitgrain effect settings, torn edge, tape, text effects, gradient text	Numbers and colors inside them tween, other settings switch
Vector paths	the anchor points and handles of a vector shape	Smooth morph
Choices	dash style, line cap, line join, layout mode, alignment, distribution, text alignment, image fit, text transform	Switch at the end of the step
On and off	visibility, wrap	Switch at the end of the step

A few details worth knowing:

Effect parameters animate too. Put a dither or halftone effect on an image layer, raise its strength on frame 2, and the effect ramps up over the step.
Vector paths morph when the start and end shapes have the same number of anchor points. Edit a vector's points on a later frame (move them, don't add or delete) and the shape bends from one to the other. If the point counts differ, the shape swaps halfway through the step instead.
Draw-on is the easiest way to animate a line being drawn. Set Draw-on to 0% on the base frame and 100% on the next. It lives in the right panel for vector layers and ink brush layers.
Layers inside groups and frames animate as well, so an auto layout group can change its gap while its children move.

Timing and easing

Each frame has two timing settings, shown when it is selected:

Duration (in ms): how long the move into this frame takes. The minimum is 50. New frames get 600.
Easing: the feel of that move.

The base frame shows Loop back instead of Duration. It sets how long the return from the last frame to the base takes when looping is on.

Easing	Feel
Linear	Constant speed. Mechanical, good for scrolling text.
Ease in	Starts slow, finishes fast.
Ease out	Starts fast, settles gently. Good for things arriving on screen.
Ease in out	Slow at both ends. The default for new frames.
Spring	Overshoots the target slightly, then settles back. Gives a small bounce.
Hold	No motion during the step, then a jump to the new pose at the end. Use it for pauses and hard cuts.

Tip: To make something sit still for a moment, add a frame, change nothing, and give it a duration. That frame acts as a pause.

Frame rate and looping

fps sets how many frames per second the export renders: 24, 30 or 60. New timelines use 30. Higher values are smoother but make larger files and take longer to export.
Loop is on for new timelines. With it on, playback and exports return to the base frame using the Loop back timing, so the end of the animation joins the start. Turn it off for a one-shot animation that stops on the last frame.

The total length of the animation is the sum of every frame's duration, plus Loop back when looping is on.

Exporting an animation

Click Export in the timeline bar. The Export animation panel opens.

Format	Best for	Notes
MP4	Social posts, messaging apps	Best quality and widest support. Has a Quality setting: Low, Medium, High or Ultra.
WebM	Websites	Smaller file for the web.
GIF	Anywhere a looping image is needed	Limited to 256 colors, so gradients and grain can band.
SVG	Web pages that need crisp vector motion	Animates movement and opacity only.
Lottie	Apps and sites using a Lottie player	Vector JSON with full motion, color and easing. Saves as `.json`.

For MP4, WebM and GIF you can also choose a Resolution of 1x, 2x, 3x or 4x. The panel shows the output size in pixels next to the dropdown.

Click Export followed by the format name. The button shows progress as a percentage while frames are rendered, and the file downloads when it's done. Click Done to close the panel.

Things to know:

Exports render only the page whose timeline you are editing.
If your browser can't encode MP4, Bitgrain saves a WebM instead.
A single export renders at most 1,800 frames. At 30 fps that is one minute, at 60 fps thirty seconds. Anything longer is cut off.
If an export fails, the reason is shown in red in the panel.

Plan limits

On the free plan, MP4, WebM and GIF exports carry the Bitgrain watermark and are scaled down so the long edge is at most 1500 pixels, whatever resolution you pick. Pro removes both limits. See plans and pricing for the full comparison.

Playing animations in presentations

Animated pages play automatically when you present your project. See presentation mode.

A quick first animation

Make a square page with a title and a shape.
Click Animate. You are on the Base frame.
Move the title just below the bottom edge of the page and set its opacity to 0%.
Click +. On frame 2, drag the title up to its final spot and set its opacity back to 100%.
Set frame 2's easing to Ease out and its duration to 800.
Click + again and leave frame 3 unchanged with a duration of 1500, as a pause.
Press play, then export as MP4.