loading

Keyframes

A property does not have to travel from one value to one other value. Hand it a sequence and it walks through every entry in turn - the same collection expression syntax C# already gives you, no separate keyframe type to learn. The transition then controls how that walk is timed: times for where each stop falls, eases for how each leg is curved, repeat for what happens at the end.

Keyframe sequences

Any animatable property accepts one: Bm.To(scale: [1, 1.3, 0.8, 1]). By default the stops are spaced evenly over the duration; times on the transition overrides that with explicit offsets in 0..1, which is how the second stage below lingers in the middle of its run and sprints at the end.

Evenly spaced · scale + rotate together
times: [0, 0.2, 0.5, 0.8, 1]
Razor

Color keyframes

Colors interpolate as colors, not as strings, so a palette cycle is just another sequence. Repeating one needs the first and last entries to match - otherwise every loop jumps back to the start rather than arriving there.

Razor

Per-segment easing

One curve across a five-stop sequence rarely reads right - a ball that falls and lands should accelerate on the way down and decelerate on the way up, not ease symmetrically through both. eases gives every segment its own curve (one entry per segment; the last repeats if the array is short), which is what turns the sequence below from a wobble into a bounce.

Razor

Continuing from the current value

A sequence normally snaps to its first entry before it starts - fine on mount, jarring when the element is already mid-flight somewhere else. Bm.Current is a wildcard first entry meaning "wherever this element is right now", so the new sequence picks up from the live value instead of teleporting. Interrupt the drift below at any point and watch the difference between the two stages.

x: [0, 140] · snaps home first
x: [Bm.Current, 140] · continues
Razor
Bmotion 0 el ยท 0 active
An unhandled error has occurred. Reload ๐Ÿ—™