Motion Graphics guide

Getting started with Motion Graphics

Motion Graphics makes motion graphics in your browser: layers, keyframes and effects, rendered on your device. Nothing is uploaded.

Open Motion Graphics

Add a layer

1. Click Layer at the top and choose Text. Solid, Shape, Null and images or videos from your computer or Files are there too.
2. In the Layer tab on the right, type your words in Text. Fit box to text makes the box match them.
3. Composition, at the top, sets the size, the frame rate, the length and the background.

Animate it

The Motion tab also has Random motion: seeded wobble you can repeat with the same seed.

1. Open the Motion tab. Pick a preset under In (Fade in, Slide up, Pop or Spin in) and click In. Out works the same way for the end.
2. For your own animation, move the playhead, then click the diamond next to a property, such as position or opacity, to add a keyframe. Move the playhead again and change the value.
3. The keyframes show as diamonds in the Timeline. Drag them to change the timing. The Graph editor shows the easing curves.
4. Press Space to play. Loop, In and Out under the preview set what plays.

Add effects

In the Effects tab, pick an effect and click Add. The effects are blur, drop shadow, glow, colour, grain, vignette and glitch. They apply from top to bottom, and the arrows change the order. Each number has its own diamond, so it can be animated too.

Render

Video is recorded in real time, so a 5 second clip takes about 5 seconds. Save to Files (Ctrl+S) keeps the project.

1. Click Render (Ctrl+E).
2. Choose the Format: a PNG sequence (a zip that keeps transparency), WebM or MP4 when your browser can record it.
3. Choose the Range and click Render.

Keyboard shortcuts