loading

Easing

An easing curve is what turns a duration into a feel. Bm.Tween takes one as its second argument and covers the full easings.net family - the cubic default (In / Out / InOut) plus Sine, Quad, Quart, Quint, Expo and Circ, the overshooting Back and Anticipate, and the oscillating Elastic and Bounce - along with steps() staircases and arbitrary cubic-béziers. Curves the browser can express are sampled to linear() and handed to the compositor; the rest run on the C# frame loop.

Named presets

Each row below plays the same 240 px move over the same 0.9 s, so the only thing that differs is the curve. Watch where each one spends its time: InOut variants start and end slow, Out variants front-load the distance, and ElasticOut / BounceOut keep moving after they arrive.

SineInOut
QuadInOut
QuartInOut
QuintInOut
CircOut
ExpoOut
BackOut
Anticipate
ElasticOut
BounceOut
Razor

Custom cubic-bézier

When no preset is the curve you want, hand Bm.Tween the four control numbers directly with bezier: [x1, y1, x2, y2] - the same values CSS cubic-bezier() takes, and the same values a design tool exports. A y outside 0..1 is what produces anticipation and overshoot.

0.4, 0, 0.2, 1 · material standard
0.68, -0.6, 0.32, 1.6 · anticipate then overshoot
0.9, 0, 1, 0.2 · slow start, hard stop
Razor

Stepped easing

Bm.Tween(steps: n, stepJump: …) maps to CSS steps(): instead of a continuous curve the progress advances in n discrete jumps - the sprite-sheet and ticking-counter look. stepJump decides where those jumps fall: End holds the first frame and jumps on the way out, Start jumps immediately, None keeps both endpoints, and Both skips both.

steps(6, end)
steps(6, start)
steps(6, none)
steps(6, both)
Razor
Bmotion 0 el · 0 active
An unhandled error has occurred. Reload 🗙