Animate with Motion

Motion adds a timeline to a layer. Each clip contains property tracks and keyframes; playback can be manual or attached to an event.

Create a first clip

1. Select a layer and open the timeline with the Motion button in the bottom toolbar.
2. Choose New clip and give it a descriptive Clip name.
3. Set Duration and choose Manual as the initial Trigger.
4. Use Add track and choose Opacity.
5. Set the playhead to the beginning, add a keyframe and set its value.
6. Move the playhead to a later time, add another keyframe with a different value, and choose its easing.
7. Use Play, Pause, Play backwards and Stop to inspect the result. Stop restores the design.

Keyframes must remain inside the clip. MODO rejects a move that would overlap keyframes instead of losing one. Shift-click adds keyframes to a selection; the timeline explains the available keyboard edits.

Configure playback

Adjust delay, speed, direction and repeats for the effect you need. Repeats (0 = forever) explicitly controls infinite playback. Use the preview loop to inspect an effect while editing.

Supported tracks include opacity, movement, uniform scale, rotation and solid background/text colors. Transform animation changes the visual presentation; it does not reflow neighboring layout elements.

To trigger a clip from an interaction, choose Control Motion clip, select a clip on that layer and choose a command such as Play, Pause, Resume, Reverse, Seek or Stop and restore.

Reuse and override

Instances inherit clips from their main component. Open the main component to change the shared animation, or create a supported local clip. The timeline follows the active frame and variant; local overrides replace inherited clips. Use Reset local override when you want inheritance again.

Preview and output

Inspect individual frames with the playhead when reduced motion is enabled. Test the page Preview for real triggers. Supported clips also have native iOS and Android playback; the corresponding runtimes have been exercised on simulators.

This is a layer animation system, not a scene-wide video editor. Point morphing, audio tracks, physics and video rendering are not provided by this timeline. Figma's proprietary animation data is not imported as MODO Motion.

See interactions, media playback and native delivery.