Export
Rendering & Export
Export to MP4, GIF, PNG sequence, or spritesheet — render pipeline, settings, and encoding.
Rendering overview
MotionKit renders your animation frame-by-frame directly inside the browser — no external tools, no cloud processing. Click Render (🖥) in the toolbar to open the render dialog.
Export formats
| Format | Extension | Best for |
|---|---|---|
| MP4 | .mp4 | Video sharing, social media, presentations. H.264 encoded. Best quality-to-size ratio. |
| GIF | .gif | Embeds in docs, README files, chat messages. Supports transparency. Larger file size than MP4. |
| PNG Sequence | .zip | Post-production, compositing in After Effects or Premiere. Each frame as a separate PNG. Delivered as a ZIP file. |
| Spritesheet | .png | Game engines, CSS sprite animations, web animations. All frames on a single image in a grid layout. |
Render settings
| Setting | Options | Description |
|---|---|---|
| Scale | 1×, 2×, 3×, 4× | Resolution multiplier. 2× on a 400×300 frame renders at 800×600. |
| Quality | Low / Medium / High | Compression quality for MP4 and GIF. |
| Work area only | Toggle | When enabled, only renders the frames within the work area markers instead of the full timeline. |
How rendering works
Timeline mode
Iterates from time 0 to total duration at the configured FPS. For each frame, morph paths are applied first, then property interpolation, discrete properties, and text states. The composite frame is exported as PNG via Figma's exportAsync.
FBF mode
Steps through clips in sequence — only the active clip's layer is visible. Nested timelines and nested FBF clips are resolved recursively. Detached clips remain visible throughout.
Client-side encoding
All PNG frames are sent to the UI thread, which handles encoding:
- MP4 — H.264 encoding using WebCodecs or a fallback encoder.
- GIF — quantization and LZW compression in JavaScript.
- PNG Sequence — packaged into a ZIP using JSZip.
- Spritesheet — composited onto a single canvas.
Cancellation
Cancel anytime from the progress dialog. MotionKit restores the canvas to its original state and discards partial output.
Tips
- 2× scale — sharp retina results without excessive file size.
- GIF vs MP4 — GIFs are large. Prefer MP4 for anything longer than ~3 seconds.
- Work area — render only the section you're polishing for fast iteration.
- PNG sequence — lossless quality for post-production in After Effects or Premiere.