Animate a visual story
Use YADL timeline actions to reveal information in an understandable sequence.
Animate a visual story
Animation works best when it clarifies order: reveal a step, emphasize a decision, then leave enough time for people to read the result. Use the timeline to preview and adjust the timing.
Start with a short sequence
In source, a timeline sits inside a diagram. Actions use a named target and an explicit delay. The following verified YADL pattern reveals three cards in sequence:
export video { fps 30 viewport (1080, 1080) format mp4 }
paint Paper { color "#f8fafc" }
paint Ink { color "#0f172a" }
paint Blue { color "#0369a1" }
brand AgentBaseline {
paints { background.page = Paper text.body = Ink text.title = Ink brand.primary = Blue }
typography {
title { font "Arial" size 48 fontWeight 700 }
body { font "Arial" size 30 }
}
}
brand AgentBaseline
background { div { style = "width:100%;height:100%;background:var(--theme-background)" } }
style card { background-color: "#0369a1"; color: "#ffffff"; border-radius: "16px"; font-size: "30px"; }
style accent { background-color: "#0d9488"; color: "#ffffff"; border-radius: "16px"; font-size: "30px"; }
scene story "From idea to delivery" {
diagram "From idea to delivery" type architecture {
text heading { "From idea to delivery" as title at (80, 70) size (920, 90) }
text description { "Follow one clear path." as body at (80, 165) size (920, 80) }
Plan: { text "Plan" at (100, 280) size (240, 150) }
Build: { text "Build" at (420, 280) size (240, 150) }
Share: { text "Share" at (740, 280) size (240, 150) }
Plan -> Build: { type smoothstep marker-end arrowclosed color slategray thickness 4 }
Build -> Share: { type smoothstep marker-end arrowclosed color slategray thickness 4 }
timeline story duration 4s {
action revealPlan after 0ms { show Plan using fadeIn for 600ms }
action revealBuild after 900ms { show Build using fadeIn for 600ms }
action revealShare after 900ms { show Share using fadeIn for 600ms }
}
}
}Use the element names (Plan, Build, and Share) consistently. When you move a clip or action-start marker in the timeline, YADL updates the corresponding timing in source and keeps the canvas and source history together.
Keep motion readable
- Reveal groups in the order a viewer should understand them.
- Use a short, consistent entrance effect rather than many competing motions.
- Leave a final hold so the completed visual can be read before export ends.
- Preview from the beginning and scrub individual moments before exporting.
Keep a loop alive during a presentation stop
Presentation stops normally freeze the narrative timeline. To keep a decorative, infinite visual loop moving while the presenter is waiting for input, add during presentation to an infinite animation or an animated edge:
shape indicator {
animation pulse infinite during presentation
}
Source -> Preview: {
animated during presentation
}This is presentation-only ambient motion. It does not continue finite actions, transitions, media, audio, or video, and it has no effect on preview playback outside Presentation mode or on exports. See Timeline for stop-marker syntax and controls.
For format, frame, and export-readiness requirements, see Video and Export video.