Create your first animation

This tutorial takes you from the editor welcome screen to a saved, previewed animation. It uses a title and a second scene so you learn the same project, canvas, inspector, scene, timeline, and export boundaries used by larger productions.

Activeuserdesktop15–20 minutes

Verified against frontend@2.0.0

What this workflow is for

Use this workflow when you want to:

• learn the editor without starting from a complex template;
• make a short title card, announcement, or explainer;
• confirm that saving and export work on your browser and device; or
• establish a clean project before following a feature-specific guide.

Starting with one text object is useful because selection, transformation, timing, scenes, and export remain easy to inspect. Add complex artwork and audio only after this basic loop works.

Before you start

You need:

• a supported desktop browser with enough space to show the canvas and timeline;
• permission to download files if you plan to export a .scribe backup or video; and
• a Scribe account only if you want to use the synced project library.

You do not need to sign in to create a blank project, save a local checkpoint, export a .scribe package, or render through a locally available exporter.

1. Choose how to begin

1234

If an editor project is already open, File separates starting, saving, loading, package, and project-library actions.

Screenshot callouts

1. 1
   New Project

   Opens the project/template chooser. Choose Blank project for this tutorial.
2. 2
   Save Locally

   Creates a browser-local checkpoint. Use it after your first meaningful edit.
3. 3
   Load Project

   Opens the signed-in project library when you want existing work instead of a blank project.
4. 4
   Export .scribe

   Downloads the portable editable backup used near the end of this tutorial.

1. On the welcome screen, select Create New Project. If the editor is already open, choose File → New Project, then Blank project.
2. Wait until the editor shows a blank canvas and one scene.
3. Confirm the project badge in the header reads New Project.

If you are already editing, use File → New Project, then choose Blank project in the template chooser. Scribe shows an unsaved-work confirmation when replacing a dirty project; cancel and create a backup first if the current work matters.

Expected result: a blank project named New Project, one active scene, an empty timeline, and no selected object.

2. Add a title

The fastest desktop path is the Text button in the canvas toolbar. It inserts a default New Text object and selects it. The left-side Text library is different: choosing a text preset or block adds that prepared item immediately.

1234

A new text object appears in the active scene and receives a matching timeline track.

Screenshot callouts

1. 1
   Text toolbar button

   Adds the default New Text object at the active scene and playhead position.
2. 2
   Selected title

   The canvas object can now be moved; its selection also drives the inspector and timeline.
3. 3
   Active scene

   The object belongs to Scene 1. The card reports the scene duration and object count.
4. 4
   Text timeline track

   The track represents the same selected canvas object and exposes its timing.

1. Select Text in the top canvas toolbar.
2. Confirm that New Text appears on the canvas.
3. Click the object if it is not already selected.
4. Drag it to a clear position within the white canvas.
5. Do not drag it into the gray pasteboard; content outside the canvas is not part of the visible frame.

Expected result: the title is selected, the scene reports one object, and a text track is visible.

3. Change the words and appearance

Selecting an object opens the right-side Properties panel. The floating toolbar is for quick duplicate, delete, scale, position/layer, and rotation reset actions; the inspector is for named and numeric properties.

12345

Selection connects one object across the canvas, floating actions, Properties inspector, and timeline.

Screenshot callouts

1. 1
   Canvas selection

   Horizontal handles resize the text box. Drag the object itself to move it.
2. 2
   Selection toolbar

   Provides duplicate, delete, scale, position/layer, rotation, and reset actions for the selected object.
3. 3
   Properties inspector

   Open Text to change content, font, size, and fill; open Preset Animation to set entrance behavior.
4. 4
   Selected timeline track

   The blue row is the selected text track. Timing changes should remain inside the scene duration.
5. 5
   Keyframes drawer

   Use this later for custom motion. A first project can use Preset Animation instead.

1. In Properties, expand Text.
2. In Content, replace New Text with a short title.
3. Press Enter without Shift, move focus away, or click elsewhere to commit the content.
4. Adjust Font Size, Fill Color, or Font only if needed.
5. Expand Basics and use Position X/Y when you need repeatable numeric placement.

For multiline text, use Shift+Enter inside the content field. Resizing a text object changes its text-box width; it is not the same operation as changing Font Size.

Expected result: the canvas, object name/track, and text inspector all refer to the same selected title.

4. Add a simple entrance

1. Keep the title selected.
2. Expand Preset Animation in Properties.
3. Set Animation Type to a simple entrance such as fadeIn or scaleIn.
4. Set Start Time (seconds) to 0.
5. Use a short Duration (seconds) that leaves time to read the title.
6. Leave Easing at its default until the preview works.

The inspector writes these changes directly; there is no separate desktop Apply button. The Timing source message explains whether preset animation, draw steps, explicit visibility, or keyframes currently controls the object.

Before combining more than one of those systems on the same object, read How timing sources combine. Choosing Draw In later does not create Draw Steps automatically; those are authored separately in DRAW.

Expected result: the text track reflects a timed animation and the title changes during preview.

5. Preview the first scene

1. Move the playhead to the beginning.
2. Press the triangular Play button above the timeline.
3. Watch the title enter.
4. Pause playback before editing again.

During playback, editing and viewport actions are limited so the preview remains deterministic. If the title is invisible at time zero, let the entrance play or temporarily choose none while positioning it.

6. Add a second scene

1234

Templates occupy the left creation panel while scenes remain in the lower-left project structure.

Screenshot callouts

1. 1
   Template browser

   Template cards are optional starting structures. Their PROJECT or SCENE badges indicate scope.
2. 2
   New Scene

   Adds another scene to the current project without replacing Scene 1.
3. 3
   Scene card

   Select a scene card before adding or editing scene-local content.
4. 4
   Timeline playback

   Preview project timing from the timeline after the new scene has content.

1. Select + New Scene.
2. Select the new scene card.
3. Add another text object and change its content.
4. Use the scene card menu when you need to rename the scene or set its duration.
5. Play from Scene 1 and confirm the project advances into Scene 2.

Use a new scene for a new beat or camera composition. Do not create a scene merely to animate a second object; objects inside one scene can have independent timing.

Expected result: the project has two named scene cards and each scene displays its own content.

7. Save both a checkpoint and a portable backup

1. Pause playback.
2. Choose File → Save Locally.
3. Wait for the Saved locally notice.
4. Choose File → Export .scribe….
5. Keep the downloaded file's .scribe extension and store it outside a temporary downloads folder.

Save Locally writes a recoverable checkpoint in this browser profile. A .scribe package is the portable backup to move between browsers or devices. These are not interchangeable; use both for important work.

For signed-in library sync, use File → Save to Library (Complete) and provide a project name, description, and folder on the first save.

8. Export a viewing copy

1. Preview from the beginning and check both scenes.
2. Choose the exporter in the header.
3. Select Export, or use File → Export (...)….
4. Choose only the resolution and format available for your plan and device.
5. Keep the editor open while rendering.
6. Play the downloaded video once before sharing it.

A video is a viewing copy, not an editable backup. Keep the .scribe package even after the video exports successfully.

Final result checklist

You are finished when:

• the project contains two scenes;
• the first scene has a readable title with one entrance;
• the second scene has different content;
• playback reaches the second scene without clipping either title;
• the project badge no longer shows an unsaved-change dot after local save; and
• you have an exported .scribe package and, if needed, a playable video.

Limitations and safe choices

• Local checkpoints stay in the current browser profile and can be erased by browser cleanup.
• Library saving requires sign-in and network access.
• Some voiceovers may remain local when a library save is interrupted; Scribe reports this in the save notice.
• Templates can replace a scene or an entire project depending on their type. Read the confirmation before applying one to existing work.
• Text objects use horizontal resize handles because resizing changes the text-box width.
• Export formats, resolution, watermark behavior, and encoding paths vary by plan and platform.

Troubleshooting and recovery

The text is not visible

1. Pause playback and seek to the beginning.
2. Select the text track in the timeline.
3. Check Preset Animation → Start Time and Duration.
4. Temporarily set Animation Type to none.
5. Confirm the object is inside the white canvas and is not hidden behind another layer.

Selecting the object does nothing

• Stop playback.
• Press Escape once to leave a connector or group-edit operation, then select the object again.
• Check whether the object is locked.
• Select its timeline track if it is difficult to click on the canvas.

You started a new project accidentally

• If the recovery prompt appears after reopening, choose Restore.
• Otherwise import your latest .scribe package.
• Do not repeatedly refresh while a package import or recovery operation is running.

Export fails

• Save a .scribe package before retrying.
• Try a lower supported resolution.
• Keep the tab in the foreground and prevent the device from sleeping.
• Use Choose the best export for encoder-specific recovery.

Keyboard and accessibility notes

• Ctrl/Cmd+S saves a local checkpoint.
• Shift+Ctrl/Cmd+S starts a complete library save.
• Ctrl/Cmd+Z undoes; Shift+Ctrl/Cmd+Z or Ctrl/Cmd+Y redoes where supported.
• Escape clears canvas selection or exits the current connector/group operation.
• Delete or Backspace removes the current unlocked canvas or timeline selection.
• Menu triggers expose expanded/collapsed state to assistive technology.
• Inspector fields use visible labels; press Enter to commit fields that support explicit keyboard commit.

Continue learning

• Workspace tour
• Create and manage projects
• Select, arrange, and connect objects
• Master the timeline
• Bind animation to audio segments