Slides, chat apps, social posts, emails and many README files cannot run your CSS. For those, Motion Studio records the motion into a file, in your browser, with nothing uploaded.
The Export tab
Open a motion and the Export tab. Set the picture first, then press the format you want.
| Setting | Choices | Tip |
|---|---|---|
| Size | 1:1, 4:3, 16:9, 9:16, Banner, or any width and height | 9:16 for stories and reels, 16:9 for slides, 1:1 for most posts |
| Frame rate | 15, 24 or 30 fps | 15 for the smallest file, 24 like film, 30 the smoothest |
| Length | 1, 2 or 3 loops | For loops only. A GIF repeats forever anyway |
| Sharpness | 1× or 2× | 2× is sharp on high-density screens, with four times the pixels |
| Smooth GIF | On or off | Mixes neighbouring colours so gradients do not band |
Under the settings, a line says what you will get: how long, how many frames, and how many pixels. If the GIF will be big, it says so and suggests a video, a smaller size or a shorter length.
The stage background is part of the picture: dark, light, any colour, or see-through.
GIF
Press GIF. A progress bar shows each frame being drawn and then encoded, and Cancel stops it. The file downloads when it is done.
A loop is recorded for whole cycles, so the GIF repeats without a jump. A motion that plays once is recorded with a short hold at the end. Hover and click motions are recorded pressed, then let go, so the file shows both states.
Use a GIF where video does not play: older chat tools, email, some README renderers and slide tools.
Video
The video button says Video MP4 or Video WebM, depending on what your browser can record. A video is far smaller than a GIF of the same motion, with full colour and no banding. Use it for social posts, slides that take video, and anywhere a GIF would be several megabytes.
Animated SVG
Animated SVG saves one SVG file that plays by itself: the motion's markup and CSS inside the SVG. It is tiny, sharp at every size, and works in an <img> tag, in a GitHub README and in many slide tools.
It is available for loops and motions that play once. Hover, click and pointer motions need a page to react to, so take their code instead (lesson 5).
This frame
This frame saves what the stage shows right now as a PNG. Drag the time bar to the moment you want first. With the see-through stage, the PNG has a transparent background: a good way to get a still of a motion for a thumbnail or a design file.
Keep files small
- Smaller size first. Half the width and height is a quarter of the pixels.
- 15 fps is plenty for most UI motion in a GIF.
- One loop. A GIF repeats by itself; more loops only make it longer.
- Video over GIF whenever the place accepts video.
- Smooth GIF off for flat colours; on for gradients and glows.
That completes the course. You can now find a motion, shape it, time it, and ship it as code or as a file, for any place it needs to go.