Animation and video

Moda animates the designs you build on the canvas. Anything you can place — text, shapes, images, charts — can move, fade, scale, or rotate over time, and you can export the result as video. This is animation, not video editing. Moda doesn’t cut together footage you filmed; it puts your own design in motion.

​

Start an animation

Choose Animation as the format in the homepage prompt bar, then pick the output size. You choose the size up front because an animation has one output size for the whole piece: Landscape is the default. You can change the size later from the Animation size control in the toolbar. You can also ask the agent for one directly — “animate this logo reveal for Instagram Stories” — and it will pick the format and build the motion.

​

Keyframes

A keyframe records a property’s value at a moment in time. Set two, and Moda animates between them. Each property in the Details panel has a diamond in its left gutter — the control that turns animation on for that property and adds keyframes. Changing a value on its own does not create a keyframe; you arm the property first. The diamond tells you where you are: hollow light grey means not animated, hollow dark grey means animated with the playhead between keys, and solid means the playhead is on a keyframe — clicking it then removes that keyframe. A property driven by an effect shows a muted diamond and is edited in the timeline instead. In the timeline dock you can drag keyframe markers along a row to retime them.

​

Easing

Easing controls how a value travels between two keyframes — whether it starts abruptly or glides in. Select a keyframe and pick from the easing menu:

• Linear — constant speed. Mechanical; good for continuous motion like a rotating loader.
• Ease in / out / in & out — the everyday choices. Natural-feeling starts and stops.
• Cubic and quint variants — the same shapes, more pronounced.
• Back — overshoots slightly before settling. Good for a playful entrance.
• Bounce — settles with a bounce.

If you’re unsure, Ease out for things entering and Ease in & out for things moving between positions will cover most cases. For a curve the presets don’t cover, open the easing curve editor from the track in the timeline dock and drag the handles to author your own cubic curve. You can convert a named preset into a custom curve this way; once you do, the property reads Custom instead of a preset name.

​

Multi-page animations and transitions

An animation can have several pages, played in order like scenes. Each page has its own duration and its own keyframes. Between pages you can set a scene transition:

• Dissolve — cross-fade between scenes.
• Push — the outgoing scene is pushed off by the incoming one (left, right, up, or down).
• Slide over — the incoming scene slides across the top of the outgoing one.
• None — a hard cut.

Transitions apply when you play the animation through and when you export all pages as a single video.

​

Export

Use Download in the toolbar: The frame-rate picker appears for single-page MP4, GIF, and WebP. Layers always renders at 30 FPS, and so does a full-video MP4 — see below. MP4 isn’t two formats. Whether you get one page or the whole piece is the Pages setting in the same dialog: Single page, or All pages (labelled Main edit when the edit timeline is on) to join every page with your scene transitions. A full-video export always renders at 30 FPS — the frame-rate picker doesn’t apply to it. Which to pick: MP4 for anything going to a social platform or an embed — better quality, smaller file. WebP instead of GIF whenever the destination supports it; it’s smaller and keeps transparency. Layers (.zip) when someone downstream is compositing in a real video editor.

​

Length limits depend on the format

Each format has its own ceiling, and they’re counted in frames rather than seconds — so your frame rate decides how much time you get.

• MP4 encodes in your browser and isn’t capped. A two-minute MP4 is fine. It only meets a limit if your browser can’t encode it and the export falls back to Moda’s servers.
• GIF and WebP encode on Moda’s servers, capped at 2,000 frames. That’s about 166 seconds at 12 FPS, or 66 seconds at 30 FPS.
• Layers (.zip) has a different shape of limit entirely — see below.
• Handing a render to Moda’s servers (available for single-page MP4 and GIF only, and not yet enabled for everyone) adds a 120-second ceiling. WebP, Layers, and full-video MP4 have no such path, so it never applies to them.

If a GIF or WebP is refused, lower the frame rate or shorten the animation. On a single-page export both work — dropping GIF from 15 to 12 FPS buys you a quarter more length. On a full-video export the rate is fixed at 30 FPS, so shortening is the only option.

​

Layers is limited by element count, not just length

PNG-sequence Layers (the default) is assembled in your browser; choosing ProRes 4444 instead encodes on Moda’s servers. Either way the budget is two numbers:

• ~2,000 frames per element, and
• 12,000 frames total across every element on the page.

The second one bites first on a busy page: it’s element count × frames, so eight animated elements at 1,600 frames each is 12,800 — over budget at about 53 seconds, even though no single element is near its own 2,000-frame cap. (Exactly 12,000 is still allowed; only more than that is refused.) So if a Layers export is refused, reducing the number of animated elements — group them, or remove some — helps as much as shortening the animation. You can keep working while an export runs. A 4K export takes noticeably longer than 1080p.

​

Tips

• Animate fewer things than you think. Two or three moving elements per scene reads as deliberate; everything moving at once reads as noise.
• Keep entrances short. 300–600 ms is enough for something to arrive. Long entrances make a piece feel sluggish on second viewing.
• Give the viewer a beat to read. If a scene contains text, let it hold still for a moment before the next transition.
• Check it at final size. Motion that looks smooth on a large canvas can feel frantic in a small feed placement.

​

Troubleshooting

​

Next steps