Transition sequence

A React block (a whole screen) in Beamline's CMS & media app.

An event's sequence of states for one object, as an inspector. The states play in order; each step between two states has its own duration and easing, while the whole sequence's delay, plays (once, a count, or until stopped, a mode of its own, never a big number) and what each repeat does (start over or go back) sit in a separate group that never changes a step. States move earlier or later by buttons, are added from the object's other states, and removed with the neighbours joined and said. A duration outside 0–30 s is said. One line totals the run, and a timeline draws the delay and each step to scale. Above it a stage draws the object in each state (lifted, glowing, pressed as they look) with each step's easing curve and duration between them; pressing a step chooses it; Play once runs a preview card through the sequence and stops (optional picture prop for the card).

Use it for

Setting how an object moves between its states on an event (hover, press, load) in a design or animation tool.
Any ordered set of timed steps whose own timing must stay apart from the whole run's.

Not for

Keyframes on a time ruler (a timeline editor).
Binding properties to data (data-binding).

Anatomy

header: the product's mark, object and event, the run's total in words
timeline: the delay and each step to scale
states in order: where it starts, each step with its timing; earlier, later, remove; add a state
step: duration and easing, this step only
whole sequence: delay, plays, each repeat

States

one step
several steps
step chosen (outlined)
sequence plays a count, or until stopped
a removed state joins its neighbours (said)
duration missing or out of range (said, hatched)
every state used
phone: one column
right to left: the page mirrors

Keyboard

Tab to each step and its earlier, later and remove buttons; Enter chooses a step
Duration and delay fields take arrows; plays and repeats are segmented choices

Motion

The timeline's bars ease to their new widths when a timing changes; nothing moves at rest.

Props

Prop	Type	Default	Description
`object` (required)	`string`	—
`event` (required)	`string`	—
`states` (required)	`ObjectState[]`	—	Every state the object has.
`defaultOrder` (required)	`string[]`	—	State ids in the order the sequence plays them; the first is where it starts.
`defaultTiming` (required)	`Record<string, StepTiming>`	—	The step arriving at each state, keyed by that state's id.
`defaultSequence` (required)	`SequenceTiming`	—
`defaultSelected`	`string`	—
`onChange`	`((order: string[], timing: Record<string, StepTiming>, sequence: SequenceTiming) => void)`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`picture`	`string`	—	A picture for the object's preview (its cover image), so the states read as the real card.

Built from

Import

import { TransitionSequence } from "@beamline/transition-sequence";

Get it

Transition sequence is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent