Timelines and triggers.

Several timelines in one project, each deciding when it plays.

Timeline tabs

Each tab above the transport is its own clip: its own name, duration and keyframes. The plus adds one, double click renames it, the eye mutes it. Muted clips stay editable but never play or export.

Master view

The Master pill opens the big picture: every clip as a box on one shared clock. Drag a box to set when it starts. Drag the bright band inside to slide the animation within its clip.

The master clock

Clips without a trigger all play together automatically, on one shared stopwatch, the moment the component starts. That stopwatch is the master clock. The scene lasts as long as the longest clip; a box pushed past the end is cut there.

Scene trigger

In Master view, the dropdown next to the gear decides how the WHOLE export starts: on load, on click, on hover, when scrolled into view, or scrubbed by the scroll position.

Clip triggers

A clip can wait for its own event instead. Click the chip on its Master box, or use the same dropdown while its tab is active, and pick On click or On hover. The clip leaves the clock and plays when someone clicks or hovers the elements it animates. Hover clips reverse back out when the pointer leaves.

Click toggle

The third flavor, made for menus and panels: the first click plays it open, the next click plays it back. Clicking mid play turns it around from wherever it is.

Trigger another element

For remote controls, like a button that opens a panel: pick Trigger on another element, then click that element on the canvas. The event lands there, the animation happens wherever the clip's keyframes are.

Loops

The Loops button next to the trigger dropdown repeats the whole export when it ends. A triggered clip gets its own loop sign on its box: a hover clip loops while hovered, a click clip keeps going until clicked again.

Preview loop

The repeat button next to Play loops playback in the editor only. It is a working convenience and never ships.

Editor vs export

The canvas plays every open eye clip together so you can design the whole scene at once. Triggers apply in the real component: test them in the export preview, which runs the exact code you ship.

Interactions check

The export panel warns before anything ships wrong: a triggered clip with no keyframes yet is left out, a deleted trigger element falls back to the clip's own elements, and it flags two clips fighting over the same property on one element.

Stew Lab (beta)

The Stew Lab pill next to Master opens the board: timelines listed on the left, click one to place it as a card, drag cards to arrange them, drag empty space to pan. Click a card and its menu opens with every trigger in one place.

Chaining clips (wires)

Drag the dot on a card's right edge onto another card to say "when this one ends, play that one". The wire shows as a line and as a sentence at the bottom of the board; click either to cut it. A clip played by a wire leaves the scene clock and waits its turn, and the exported code gets one callback for it - that is how you build a state machine: idle plays walk, walk plays land.

Key press trigger

In a card's Stew Lab menu, click the key box and press any key. That key plays the clip in the export. Great for characters: W to walk, Space to jump.