Animate and export motion

Animate an object by adding one or more property tracks to a page timeline, setting keyframes at different times, and previewing the result before export.

The representative video demonstrates this exact workflow: Use the command palette to reveal the Timeline and create one empty timeline. Keyframes, playback, and animation export are outside this representative recording.

Verified result: Timeline 1 exists, its playback controls are enabled, and the original rectangle remains selected. No keyframe or animation file has been created.

Reveal and create a timelineUse the command palette to reveal the Timeline and create one empty timeline. Keyframes, playback, and animation export are outside this representative recording.Result: Timeline 1 exists, its playback controls are enabled, and the original rectangle remains selected. No keyframe or animation file has been created.

Transcript

1. Open the command palettePress Control K to open the command palette.
2. Find Toggle timelineSearch for Toggle timeline and confirm the matching command.
3. Show the TimelineRun Toggle timeline to reveal the empty Timeline at the bottom of the editor.
4. Create a timelineChoose New Timeline. Timeline 1 appears with playback controls ready for tracks and keyframes.

Download the tutorial videoDownload English captions

Prerequisites

• Open an editable file and go to the page that contains the object you want to animate.
• Select one visible object before adding its first track.
• Decide the approximate duration and output frame rate before creating many keyframes.
• For export, keep the page open and use a stable connection while frames are being encoded.

Steps: create a timeline and tracks

1. Open the Animation panel or the bottom Timeline.
2. Choose New Timeline.
3. Give the timeline a clear name, then set its Duration and FPS.
4. Select the object you want to animate.
5. Under Tracks, choose a property such as horizontal position, vertical position, rotation, scale, opacity, or visibility, then choose Add.
6. Move the playhead to the starting time and add a keyframe for the current value.
7. Move the playhead to a later time, change the value, and add another keyframe.
8. Select a keyframe to adjust its value, interpolation, or easing.

For direct editing, turn Record on only while you intend object changes to create keyframes. Turn it off before making ordinary layout corrections.

Steps: preview the motion

1. Choose Jump to start in the timeline.
2. Choose Play and watch the animated object as well as nearby static content.
3. Turn Loop on when you need to judge a repeating transition.
4. Change Speed to inspect timing without rewriting the keyframes.
5. Scrub the ruler to check specific moments, then drag individual keyframes when their timing needs adjustment.
6. Preview again from the start after every change to duration, easing, or track order.

Playback is a preview. It should not add ordinary edit steps to your undo history.

Steps: export the animation

1. In the Export section, choose the output FPS.
2. Choose whether the exported animation should loop.
3. Turn Backdrop on and select a color when the result should not be transparent.
4. For GIF, adjust the palette size and dithering only when you need to balance quality and file size.
5. Choose GIF, WebP, or MP4 to prepare that format.
6. Keep the page open while the progress indicator advances.
7. When the same button changes to Download GIF, Download WEBP, or Download MP4, choose it again to save the file.

Changing the timeline, export settings, or output format after preparation makes the prepared file stale. Prepare it again before downloading.

Recovery

• If New Timeline is unavailable, confirm that the page is editable and no other blocking dialog is open.
• If Add creates no track, select a supported object and choose a property that is not already tracked for that object.
• If nothing moves, verify that the track has at least two keyframes at different times with different values and that the track is not muted or locked.
• If playback starts in the middle, choose Jump to start before pressing Play.
• If an edit created unwanted keyframes, turn Record off and undo the unintended keyframe edit.
• If export is interrupted by backgrounding, navigation, an orientation change, or a settings change, return to the timeline and prepare the file again.
• If a large export fails or times out, reduce duration, FPS, output dimensions, or scene complexity. Try GIF or WebP when MP4 encoding is unavailable in the current environment.

Current limitations

• Animation export depends on the codecs and encoding support available to the current Designful deployment and browser. A format may fail even when timeline playback works.
• Very long, high-resolution, or high-FPS animations can exceed request, memory, or time limits. Split them into shorter scenes or lower the export settings.
• Auto Layout children support a narrower set of animated properties. Position-related transforms, opacity, and visibility are the safest choices; unsupported properties are rejected rather than silently detached from layout.
• Preparing or previewing an animation does not publish a hosted video. The downloaded file must be uploaded or shared separately.