YADL Docs
YADL Docs
YADL documentation
Create your first visual
Use the YADL editorAdd icons, illustrations, logos, people, and backgroundsStart with templatesReuse visual components
Use the timelineAnimate a visual storyWork with audioPrepare a video frameExport an imageExport video
Manage your YADL accountPlans and billingNotifications
YADL source languageREST APIAPI keys and scopesAgent APIConnect YADL with MCP
Help and troubleshooting
Animate and export

Use the timeline

Preview, scrub, and adjust the sequence of a timeline-bearing YADL visual document.

Use the timeline

When YADL finds scene timing in a document, the editor makes a timeline available. Open it from the editor menu or press T.

Preview the sequence

Use play/pause, looping, the ruler, and the cursor to review the full story or one moment. Scrub the timeline to inspect the frame you plan to export. Space toggles playback, including while the canvas is fullscreen.

Adjust timing

The timeline groups scenes, tracks, clips, and action-start markers. You can zoom, fit the view, snap to frame or edge boundaries, and collapse sections to focus on a smaller part of the story. Drag the panel boundary—or use its keyboard controls—to give the timeline more or less room.

Moving an action-start marker or resizing a clip updates the source timing that created it. Select or reveal a timeline item when you need to inspect the matching YADL source.

Present with stops

Use Add stop at the playhead to add a presentation-only marker. It writes stop after <time> into the active timeline, appears in the dedicated presentation-stop lane, and remains part of the document when you save it. Select a marker to reveal its source, drag it to retime it, or remove it from the timeline. Stops must fall within the timeline's existing duration; they never extend the scene.

For example, this timeline pauses a presentation after one and three seconds, while preserving its four-second rendered duration:

timeline story duration 4s {
    action revealHeading after 0s { show heading using fadeIn for 500ms }
    stop after 1s
    action revealDetail after 1800ms { show detail using fadeInUp for 500ms }
    stop after 3s
}

Choose Present to seek to the beginning and enter the immersive presentation layout paused. Presentation requires an authored video frame: that frame becomes the stage, is cropped and fitted to the immersive viewport, and the usual preview-crop choice is restored when you leave. If there is no frame, use Set up video frame first.

InputPresentation behavior
Right or DownPlay until the next stop, or the end if there is no later stop.
Left or UpPause and seek to the preceding stop.
SpacePlay or pause at the current point.
EscapeLeave presentation and immersive mode.

At the final frame, presentation holds. A subsequent Right or Down starts again from the beginning. Held keys, typing in Monaco or another form control, and shortcuts while a dialog is open are ignored. Ordinary preview—including ordinary fullscreen preview—keeps its normal loop behavior and ignores all presentation stops.

Ambient motion while paused

Most motion pauses with the narrative. You can opt an infinite visual loop into a separate presentation-only clock:

shape statusRing {
    animation pulse infinite during presentation
}

Source -> Preview: {
    animated during presentation
}

The node form is valid only for infinite or looping animations. These opted-in node loops and animated-edge dash flow continue only while a presentation is waiting at a stop. Finite actions, transitions, scene state, media, audio, and video still pause with the narrative. The presenter status distinguishes a paused narrative from continuing ambient motion.

Export and persistence

Presentation stops and during presentation modifiers are saved in YADL source, so they survive reloads and work across the editor timeline and Pixi preview. The enabled presentation state and its wall clock are browser-local and reset when the workspace is replaced. Neither feature is sent to export preflight, workers, scene duration calculations, or rendered output: the document exports exactly as if those presentation-only controls were absent.

Audio and fullscreen

For referenced audio, YADL attempts to decode a browser waveform. An unavailable waveform does not prevent normal playback; it means the browser could not safely analyze that source. Fullscreen hides timeline chrome and canvas zoom controls, but playback continues.

Use Animations for a simple source pattern and Image export to save a specific timeline frame.

Reuse visual components

Find published YADL components, preview them, and create a document that starts with a reusable visual module.

Animate a visual story

Use YADL timeline actions to reveal information in an understandable sequence.

On this page

Use the timelinePreview the sequenceAdjust timingPresent with stopsAmbient motion while pausedExport and persistenceAudio and fullscreen