Layout transitions
FLIP-style projection between two measured boxes when a container reflows, driven by channels the host publishes.
When an actor's geometry changes because the layout changed — a flex container resized,
a child moved between containers — tweening x and y is not enough: neither box is
known at authoring time. A layout transition projects between two boxes the host measured.
How the boxes arrive
Every LayoutActor declares two channels:
| Channel | Published by |
|---|---|
MEASURED_BOX | The renderer, for a flow-hosted actor: the DOM box it actually occupies. |
TARGET_MEASURED_BOX | An offscreen render of the target layout during the transition. |
Both are recorded, so seeking backwards replays the boxes that were actually measured rather than the most recent ones. Both are demand-gated: nothing is measured unless a transition is reading.
Driving one
The runtime supplies the channels and the projection helpers
(@motionactor/renderers/layoutTransition); the orchestration lives on a container actor.
FlexContainerV2 in the component library is the reference:
const row = ctx.spawn(FlexContainerV2, { sizing: { direction: "row", gap: 16 } });
row.add(Card, { label: "A" });
row.add(Card, { label: "B" });
// Reflow to a column. Each child projects from its measured row box to its
// measured column box over the transition.
yield* row.transition({ direction: "column" }, { duration: 0.4, easing: Easing.inOutCubic });transition sets target, waits for TARGET_MEASURED_BOX on each child, and tweens
projectionProgress 0 → 1; the renderer draws each child at the interpolated box (a
"ghost") and hides the live one until the layout settles.
Not a core primitive yet
There is no layout.transition(...) on a plain actor. Projecting between boxes needs a
host that measures, so today it is a container-actor concern. The design for making it a
first-class runtime capability (actor.clone() + projectChange) is recorded in the
repo's plans backlog.
Use it for
- Container reflow, where the destination is decided by layout rather than by the author.
- Flow-hosted actors whose size depends on measured content.
Do not use it for
| Situation | Use |
|---|---|
| Ordinary position or opacity motion | tween |
| Switching between named view states | view transition |
| A renderer overlay like glow or blur | effects |