Animations & Timeline
Animate panel layers with keyframes, choose easing curves, watch the result in the preview, and control panel timing and transitions in PanelWave.
Animations bring individual panels to life: a character slides into frame, a background fades in, a clue zooms toward the reader. In PanelWave you build these effects from keyframes — snapshots of a layer property at a point in time — and the editor fills in the motion between them.
Three places work together:
- The Animations section of the Inspector (right sidebar, with a panel selected) is where you create and edit a panel's animation.
- Backstage → Preview is where you watch it: the preview runs the real reader, so the animation plays exactly as your readers will see it. See Preview.
- The Timeline panel (bottom of the editor) shows your whole story's autoplay timing at a glance.
Animations are saved with the panel and published in the manifest (see Animations in the format); the reader plays them when the panel comes into view.
Each panel has one animation (with as many keyframes as you like). This keeps motion design per panel simple and predictable — if you need several effects, put multiple keyframes on multiple layers inside the same animation.
What you can animate
Keyframes always target a layer of the current panel (see Layers). Nine properties are animatable:
| Property | What it does | Range |
|---|---|---|
| Opacity | Transparency, from invisible (0) to fully visible (1) | 0 – 1 |
| Move X | Horizontal offset as a fraction of the panel width — 0.1 moves the layer 10% to the right, negative values to the left | −2 – 2 |
| Move Y | Vertical offset as a fraction of the panel height — 0.1 moves the layer 10% down, negative values up | −2 – 2 |
| Scale | Uniform size multiplier (1 = original size) | 0 – 10 |
| Rotation | Rotation in degrees, clockwise | −1080 – 1080 |
| Blur | Blur radius in pixels, measured at a 1024 px wide panel (0 = sharp) | 0 – 100 |
| Brightness | Brightness multiplier (1 = unchanged, 0 = black) | 0 – 5 |
| Contrast | Contrast multiplier (1 = unchanged, 0 = grey) | 0 – 5 |
| Saturation | Color saturation (1 = unchanged, 0 = greyscale) | 0 – 5 |
Movement is measured against the panel, not in screen pixels, so the same animation looks right on a phone and on a big screen. The value field shows the unit of the property you picked.
Position, opacity, and scale animate smoothly on every device. The filter properties (Blur, Brightness, Contrast, Saturation) are more demanding — use them for short accents rather than long-running loops.
Creating an animation
Select the panel
Click the panel on the canvas or in the structure tree. The Inspector shows its properties, including the Animations section.
Open the Animation Editor
Click + Add Animation. The New Animation dialog opens. (If the panel already has an animation, use the pencil button to edit it instead.)
Set the animation basics
Under Animation Settings, enter a Name (for example "Hero entrance"), a Duration (ms) (minimum 100 ms), and optionally tick Loop Animation to repeat it continuously.
Add keyframes
Click + Add Keyframe and fill in the form: the Layer to animate, the Property, the Time (ms) within the animation, the target Value, and an Easing curve. Repeat for every point of change — usually one keyframe at time 0 and one at the end, plus any in-between steps.
Save
Click Create Animation (or Update Animation). The animation is saved with the panel, and the Inspector card shows its name, duration, loop state, and keyframe count.
The keyframe form needs at least one layer in the panel — if you see "No layers available. Create layers in the panel first", add artwork layers before animating.
Keyframes are listed sorted by time. Click a keyframe in the list to expand it and change its time, value, or easing inline; the trash button deletes it. To remove the whole animation, use the trash button on the animation card in the Inspector.
If you delete a layer that has keyframes, those keyframes no longer play. The Animation Editor marks them, and Preflight warns about them before you publish.
How an animation plays for readers
- It starts when the panel is shown and runs for its duration; with Loop Animation it repeats, otherwise the layers stay in their end state.
- Before its first keyframe a layer holds the first value, after its last keyframe the last value. A fade-in therefore needs a keyframe with opacity
0at 0 ms. - Readers who have asked their device for reduced motion see the end state without the movement.
- The panel frame clips the animation: a layer that slides in from outside the panel is invisible until it enters.
- In autoplay the panel stays until the animation has finished, even when its display duration is shorter (looping animations don't hold the panel).
Example: fade in and settle
A simple two-property entrance over 1.5 seconds:
- Opacity:
0at 0 ms (Ease In) →1at 1000 ms - Move Y:
-0.3at 0 ms (Ease Out) →0at 1200 ms
The layer drops in from above while fading in, and the Ease Out curve makes it decelerate naturally as it lands.
Easing
Easing controls the speed curve between a keyframe and the next one:
| Easing | Motion | Good for |
|---|---|---|
| Linear | Constant speed | Mechanical motion, scrolling backgrounds |
| Ease | Slow start and end, fast middle | Most natural motion (good default) |
| Ease In | Slow start, then accelerating | Falling objects, exits |
| Ease Out | Fast start, then decelerating | Objects coming to rest, entrances |
| Ease In-Out | Gentle at both ends | Smooth, elegant transitions and loops |
The Timeline panel
The Timeline at the bottom of the editor is your preview and pacing tool. It shows every panel of the current format in reading order as a continuous sequence, so you can judge the flow of the whole chapter, not just one panel.
Transport controls
| Control | What it does |
|---|---|
| Play/Pause | Starts or pauses playback (Space) |
| Stop | Stops and resets to the start |
| Jump to Start / End | Snaps the playhead to the very first or last panel and shows it (Home / End) |
| Previous / Next Frame | Steps one frame back or forward (← / →) |
| Loop | Repeats playback when the end is reached |
| Timecode field | Shows the current position — type a time (HH:MM:SS:FF, MM:SS, or seconds) and press Enter to jump there |
| FPS | Frame rate for the timecode display: 24, 25, 30, or 60 |
The single-arrow buttons step one frame at a time, so at the end of the timeline they barely move. Use the Jump to Start / End buttons (or Home / End) to snap all the way back to the first panel or forward to the last — the canvas jumps to that panel too, even when paused.
During playback the canvas automatically switches to the panel under the playhead, and any audio tracks and video panels play in sync — so what you see and hear is close to what readers get in autoplay. Panel images are preloaded so switching panels doesn't flash a placeholder.
Tracks
- Panel track — one bar per panel, in reading order. Click a bar to select that panel (the structure tree and Inspector follow along). Drag the handle at a bar's right edge to change the panel's display duration directly.
- Layer tracks — rows for timeline keyframe markers, each with visibility and lock toggles. They are a pacing aid in the timeline; the panel's saved animation is edited in the Inspector and watched in the preview.
- Audio tracks — panel audio and chapter-wide sequence audio, with mute buttons and volume/fade indicators. See Audio.
- Markers — comments and bookmarks you can place as notes along the timeline.
Navigation and editing aids
- Zoom from 10% to 500% with the slider or the zoom buttons; the ruler adapts its tick spacing.
- Snap to Grid (magnet button) with grid sizes of 0.1 s, 0.5 s, 1 s, or 5 s.
- The focus button hides other panels' clips so you can concentrate on the selected panel.
- Click or drag on the ruler to scrub; drag the playhead directly or move it with the keyboard.
- Select keyframes and markers with click / Ctrl+click / a drag rectangle; copy (
Ctrl+C), paste at the playhead (Ctrl+V), cut (Ctrl+X), duplicate (Ctrl+D), or delete (Delete) them.HomeandEndjump to the start and end.
More shortcuts are listed on the Keyboard Shortcuts page.
Panel timing (display duration)
In autoplay, each panel stays on screen for its Display Duration. You control it in two places:
- Inspector → Format Views → Display Duration (ms) — between 100 ms and 60 000 ms. Leave it empty to fall back to the work-wide
secondsPerPanelsetting. - Timeline — drag the right edge of a panel bar; the following panels shift accordingly and the new duration is saved automatically.
Vary durations to build rhythm: quick action panels at 2–4 s, standard panels at 3–5 s, text-heavy panels at 7 s or more. The timeline footer shows the total runtime.
For panels with video, the duration can lock itself to the video's length — see Video Panels.
Transitions between panels
Panel-to-panel transitions are separate from layer animations: in the PanelWave format they belong to the edges of the navigation graph that connect panels (see Graph).
In the editor:
- The Graph editor is where you create and connect edges and set their conditions.
- When a hotspot navigates the reader (a Go To action), you pick the Transition Effect in the Action Builder: None, Fade, Slide, Zoom, or Crossfade.
Exporting timing data
The timeline footer offers Preview Export, Export JSON, and Export EDL. The JSON export carries panel timing, keyframes, and audio cues for automated video rendering; the EDL file (an industry-standard edit decision list) can be imported into external video editors such as Premiere or DaVinci Resolve. See Export for the full export options.