Exporting 2D Motion Graphics: Formats, Codecs, and Platform-Safe Settings

Choosing Resolution and Aspect Ratios

Export settings should match where the animation will be viewed. The goal is to avoid unnecessary scaling (which can soften text and create aliasing on thin strokes) and to keep file size within platform limits.

Common aspect ratios and when to use them

Practical steps: pick the right canvas for export

• Start from the delivery spec: choose the aspect ratio first, then resolution.
• Prefer native sizes: export at platform-native dimensions (e.g., 1080×1920 for 9:16) to avoid platform resampling.
• Only upscale if required: upscaling can make edges look “crunchy” and increases file size. If you must upscale, check strokes and text carefully.
• Downscale carefully: if exporting multiple sizes, create a high-quality master first (e.g., 4K or 1080p), then downscale to derivatives; downscaling usually looks better than upscaling.

Multiple deliverables from one project

If you need square + vertical + horizontal versions, treat each as a separate export target with its own safe margins and layout adjustments. Avoid “one export fits all” cropping; it often cuts off important text or changes the visual balance.

Frame Rate Considerations

Frame rate affects motion smoothness, file size, and how well your animation matches other footage. Choose a frame rate that matches the platform or the rest of the edit, and keep it consistent across exports for the same campaign.

Common frame rates

• 24 fps: cinematic feel; good for design-led motion where ultra-smooth motion is not required.
• 25 fps: common in PAL regions and broadcast contexts.
• 30 fps (29.97): common for web video and many social exports; smooth enough for most motion graphics.
• 60 fps: very smooth motion; useful for fast UI-like motion, gameplay-adjacent content, or when you expect heavy motion blur to be absent.

Practical guidance

• Match the destination: if the animation will be cut into a 30 fps timeline, export 30 fps.
• Avoid changing fps at the end: converting 24→30 or 30→24 can introduce uneven motion (judder) unless handled carefully.
• GIFs often look better at lower fps: 12–20 fps can reduce file size while keeping motion readable.

Quick decision rule

If you’re unsure: export 30 fps for social/video, 24 fps for cinematic design pieces, and 60 fps only when you truly need it (fast motion, screen recordings, or a platform requirement).

Safe Margins for Text and UI Overlays

Even if your composition looks perfect in the editor, platforms add UI elements (captions, buttons, progress bars) and devices have different screen crops. Safe margins protect text and logos from being covered or clipped.

Continue in our app.

You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.

Or continue reading below...

Download the app

Two types of safety to plan for

• Action safe: keep important visuals away from edges so nothing feels cramped or gets cropped on some displays.
• Title safe: keep text and logos even further from edges for maximum readability.

Practical safe-margin guidelines (starting points)

• Horizontal 16:9: keep critical text at least 5–10% from each edge.
• Square 1:1: keep critical text at least 8–12% from edges (feeds often crop previews).
• Vertical 9:16: keep critical text at least 10–15% from top/bottom, and 6–10% from sides to avoid UI overlays.

Step-by-step: create a safe-area overlay

1. Add guides at your chosen percentages (e.g., 10% inset from each edge).
2. Create a non-rendering overlay layer (a rectangle frame) to visualize the safe zone while you adjust layout.
3. Check every scene: titles, lower-thirds, and small labels are the first to break when reframed.
4. Hide the overlay before export (or mark it as guide/non-render).

Export Targets and Recommended Settings

MP4 for social/video (H.264 and H.265)

MP4 is the most widely accepted delivery format for web and social. The codec inside the MP4 matters: H.264 is the safest compatibility choice; H.265 (HEVC) can reduce file size but may be less universally supported in some workflows.

H.264 (most compatible)

• Container: MP4
• Video codec: H.264
• Profile: High (common), or Main for maximum compatibility
• Bitrate mode: VBR (variable) is usually efficient; CBR if a platform requires it
• Keyframe interval: around 1–2 seconds (common streaming-friendly setting)
• Audio: AAC, 48 kHz (or 44.1 kHz), 160–320 kbps if audio is included

H.265 / HEVC (smaller files, check compatibility)

• Use when: you need smaller files at similar quality, and the platform supports it.
• Watch out: some review tools, older devices, or client pipelines may prefer H.264.

Practical step-by-step: export an MP4 master for social

1. Select the correct aspect ratio and resolution (e.g., 1080×1920 for vertical).
2. Set frame rate to match your project (commonly 30 fps).
3. Choose H.264 in MP4 for maximum compatibility.
4. Set bitrate targets based on resolution and complexity:
   • 1080p: start around 8–16 Mbps for clean motion graphics with gradients.
   • 4K: start around 35–60 Mbps depending on detail and motion.
5. Enable maximum render quality (if available) when scaling or when you have thin lines and small text.
6. Export a short test clip (5–10 seconds with gradients + text + fast motion), review it, then export the full piece.

GIF for lightweight loops

GIF is useful for short, looping animations where audio is not needed. The tradeoff is limited color (often 256 colors), which can cause banding in gradients and noisy dithering in subtle textures.

When GIF is a good choice

• Simple flat-color animations
• Short loops (1–6 seconds)
• Sticker-like motion, icons, simple type

When to avoid GIF

• Large gradients, soft shadows, subtle noise textures (banding and dithering become obvious)
• Long duration (file size grows quickly)
• Anything requiring crisp small text (GIF palettes can make edges look rough)

Practical step-by-step: export a clean GIF loop

1. Trim to the shortest seamless loop (remove extra handles).
2. Reduce resolution if needed (e.g., 600–900 px wide for many web uses).
3. Lower frame rate (try 12–20 fps) to reduce size while keeping motion readable.
4. Limit colors thoughtfully: start high (256), then reduce if file size is too large.
5. Choose dithering carefully:
   • More dithering can hide banding but adds grain and increases size.
   • Less dithering keeps edges cleaner but may show banding.
6. Set looping to infinite (if required by the use case).
7. Test in the actual destination (chat app, webpage, or slide deck) because each may resample differently.

PNG sequence or ProRes-like intermediates for further editing

If your animation will be color graded, composited, or edited alongside other footage, export an intermediate format that preserves quality and is easy for editors to handle. Two common approaches are image sequences (PNG) and high-quality intraframe video codecs (often “ProRes-like” intermediates).

PNG sequence (great for compositing and fixes)

• Pros: frame-accurate, easy to replace a single frame, supports transparency (alpha) if needed.
• Cons: many files, larger storage footprint, requires careful folder organization.
• Use when: you need alpha, you expect revisions, or you’re handing off to a compositor.

Intermediate video (ProRes-like)

• Pros: high quality, easier to manage than thousands of images, good for editing.
• Cons: larger than H.264/H.265, may not be ideal for final web delivery.
• Use when: you’re delivering to an editor for a larger timeline, or you want a robust “master” before making MP4 versions.

Practical step-by-step: export an intermediate master + web deliverables

1. Export an intermediate master (either PNG sequence or ProRes-like) at full resolution and project frame rate.
2. Import the master into your editing/export tool (or re-import into your motion tool) to create platform-specific MP4 versions.
3. Keep the master unchanged and generate derivatives from it (this prevents quality loss from repeated compression).

Quality Checks Before Delivery

Compression and scaling can introduce issues that are easy to miss in the editor preview. Build a habit of checking the exported file at 100% zoom and on real devices.

1) Color banding (especially in gradients)

What it looks like: smooth gradients turn into visible “steps” or rings.

• Check: skies, soft background ramps, shadows, blurred shapes.
• Fix options:
  • Increase bitrate for MP4 exports.
  • Add subtle noise/grain (very light) to break up bands.
  • Avoid ultra-smooth single-color ramps; introduce gentle texture or a slightly more complex gradient.

2) Aliasing on strokes and thin lines

What it looks like: jagged edges, shimmering on diagonal lines, crawling edges during motion.

• Check: thin outlines, diagonal shapes, small icons, fast-moving line art.
• Fix options:
  • Export at a higher resolution and downscale (often improves edge quality).
  • Slightly thicken strokes (even +0.5 to +1 px can help).
  • Avoid placing ultra-thin lines on sub-pixel positions; align to whole pixels when possible.
  • Increase bitrate; low bitrate can exaggerate edge artifacts.

3) Text sharpness and readability

What it looks like: text appears soft, fringing on edges, or becomes unreadable after compression.

• Check: smallest text size used, especially on vertical exports.
• Fix options:
  • Export at native platform resolution (avoid platform scaling).
  • Increase text size or weight slightly for mobile.
  • Ensure sufficient contrast against the background.
  • Prefer solid fills over thin outlined text for small sizes.

4) File size constraints and upload behavior

Platforms may recompress your upload. If your file is already heavily compressed, a second compression pass can visibly degrade it.

• Check: platform maximum size and recommended bitrate/resolution.
• Strategy: upload a reasonably high-quality file (not overly compressed) while staying within limits, so the platform’s recompression has more detail to work with.
• Test: upload an unlisted/private version and compare the platform playback to your local file.

Practical step-by-step: a fast QC pass

1. Watch the export at full screen once for overall impression.
2. Scrub problem areas (gradients, thin strokes, small text, fast motion).
3. Zoom to 100% and pause on key frames with text.
4. Check file size and expected upload limits.
5. Play on two devices: a phone and a desktop/laptop display.

Delivery Checklist (Naming, Versioning, Playback Verification)

Naming and versioning

• Use a predictable naming pattern so files don’t get mixed up: Project_Client_Platform_Aspect_Resolution_FPS_Date_v##
• Example: SpringSale_Acme_IGReel_9x16_1080x1920_30fps_2026-01-21_v03.mp4
• Keep masters separate: store intermediates in a MASTER folder and platform exports in DELIVERABLES.
• Never overwrite delivered versions: increment versions so you can roll back if needed.

Verification before sending

• Desktop playback: confirm smooth motion, no dropped frames, audio sync (if applicable).
• Phone playback: check readability, safe margins vs. UI overlays, and brightness/contrast differences.
• Platform test (if possible): upload privately and confirm the platform’s recompressed version still looks acceptable.
• Confirm loop behavior (for GIF): seamless start/end, no extra blank frames.

Final handoff items

• Deliver the exact requested formats (e.g., MP4 H.264 + GIF + PNG sequence).
• Include a quick spec note in your message (resolution, fps, codec) so the recipient can verify.
• Keep a local archive of the exported files and the intermediate master used to generate them.