Variants

Variants let you name your animation states once and then move a whole subtree between them by name. The parent switches to "visible"; every descendant that declares a "visible" variant of its own resolves it and plays. Nothing has to be threaded down, nothing has to be kept in sync - and because the parent owns the timing, staggering the children is one parameter rather than a list of hand-computed delays.

Named states

Declare the states in a BmVariants dictionary and select one with the razor-literal-friendly State and InitialState parameters. The list below sets State on the container only; each row carries its own variants and picks up the active name automatically.

Item 1
Item 2
Item 3
Item 4
Item 5

Razor

Orchestration

staggerChildren spaces the descendants' starts apart and delayChildren holds all of them back until the container has had its moment - both set on the container's transition. A variant can also carry its own transition via Bm.To(..., transition: …), which is how the rows below land on a spring while the container itself simply fades.

when: BmWhen.BeforeChildren is the same idea without the magic number: instead of guessing a delayChildren that happens to match the container's duration, the children are held back by that duration - and stay correct when you change it. The right-hand card is the same cascade ordered that way, and the middle one has one row cut out of the cascade entirely with Inherit="false".

delayChildren: 0.2

one row opts out

when: BeforeChildren

when: AfterChildren

staggerChildren always runs first-to-last. childStagger takes the same Bm.Stagger generator the programmatic API uses, so the cascade can radiate from the last element, from the centre, or across a grid by Euclidean distance - which needs to know how many children there are, so children claim their place during the render pass rather than after it.

from: First (default)

from: Last

from: Center

Razor

Dynamic variants

A variant can be a function of the data behind the element rather than a fixed target. Register it with Add(name, custom => …) and pass each element its own Custom value; the variant is resolved per element, so one named state describes a whole family of motions. Here the same "open" state fans the cards out along an arc computed from each card's index.

Razor

Grid stagger

Bm.Stagger is a delay generator, and it radiates across two dimensions as happily as one: pass grid: (cols, rows) and a from origin, and each element's delay grows with its Euclidean distance from that cell. Driven here by BmotionAnimateService, which animates by CSS selector and needs no wrapper component at all.

Razor