The Motion panel

Motion gives a piece a running order. It moves the piece's own parameters over time, lays words, logos, video and even other pieces over it, puts music and sound effects along it, and can switch the piece between looks when someone hovers, clicks or the page around it says so. That turns a live piece into a film, an ad, a title sequence or a part of a page.

Motion drives what the piece already has, its parameters, so it works the same on every engine: 3D, shader and 2D.

What you can do with it

• Keyframes: animate any parameter, with easings, or record changes as you play. See Keyframes and tracks.
• Layers: headlines, buttons, logos and video over the piece. See Text, image and video layers.
• Sound clips: music and effects on tracks of their own. See Sound clips.
• States: looks the piece moves between on a click, a hover, a time or a message from the page. See States and interactions.
• Loaded pieces: other pieces running live as layers. See Loading pieces onto a piece.
• Variations: other words and values for the same piece, one render each. See Variations.
• Shapes: frame the piece for 16:9, 9:16, 1:1, 4:5 or any size. See Shapes and custom sizes.
• Renders: MP4 video, a frame at a time, with sound. See Rendering video.

Opening the Motion panel

1. Open a piece on a desktop

   Make a piece, or open one from My pieces or the Gallery. The panel needs a window at least 1,024 pixels wide.

2. Open the panel

   Press M, or click the Motion button on the transport, the bar of buttons at the bottom of the stage. It is the sliders icon turned on its side, and its tooltip says Motion: timeline, layers, states.

3. Close it again

   Press M again, click the Motion button, or click Close (the × at the right of the panel's header).

The panel opens under the stage. It isn't shown in Present mode. When you open one of the trailer templates on a desktop, it opens by itself on the timeline.

The panel header

The five tabs

Timeline

A ruler and playhead to scrub, a track for each animated parameter with its keyframes, a bar for each layer, and a track for each sound, drawn with its waveform. The column on the right is the inspector: select a keyframe, a layer bar or a sound to change it there.

Layers

Add text, images, video and pieces over the piece, and style them: font, colour, position, size, turn, blend mode, filters, entrances and exits.

States

Build a state machine: the looks the piece can be in, and what moves it from one to another.

Sound

A list of the sounds on the timeline, a way to make new ones, and whether the piece's own sounds go into renders.

Variations

Other versions of the same piece, with their own words and starting values, for rendering side by side.

The stage while the panel is open

With a shape picked, the stage is framed to it, with the edges a platform's buttons and captions cover shaded so you can keep words clear of them (a custom size has none). Layers on the stage can be picked, dragged, sized and turned like objects in a design tool, and assets dragged from your library land where you drop them. Close the panel and the stage goes back to filling the space.

Where motion is kept

Motion is part of the piece. Your changes are kept with the version you are on, as parameter changes are, rather than making new versions. Everywhere the piece goes, its motion goes with it: share links, published pieces, embeds, remixes and exported HTML files all play the same timeline, layers, sounds and states.

Asking Perlin

Perlin reads the timeline, layers, states, sounds and variations as you see them, and changes them for you while leaving the rest as it was. Ask in plain words: "bring the headline in a beat earlier", "make it a 9:16 reel and keep the words clear of the buttons", or "slow it right down while someone hovers". Anything Perlin writes, you can then move by hand.

You can see these features at work on the Timeline page.

Related

• Keyframes and tracks
• Text, image and video layers
• Rendering video
• Trailer templates