Table of Contents

Class StyleTransitionConfig

Namespace
Velvet
Assembly
Velvet.Docs.dll

CSS-transition-based animation configuration for V.Motion. Drives a USS class swap (enter-from → enter-to / exit-from → exit-to); DurationSec / Easing are applied as inline styles. Use the presets on StyleTransition, optionally tuned via With(float?, EasingMode?, EasingMode?, float?).

public sealed class StyleTransitionConfig
Inheritance
object
StyleTransitionConfig

Fields

None

Sentinel value indicating "no transition": V.Motion(transition: StyleTransitionConfig.None) animates neither its mount nor its exit. Under an AnimatePresence the removed child still stays for the commit that removed it and leaves on a later render.

Properties

BezierX1

First control point's X (only meaningful when Type is Bezier). CSS cubic-bezier(x1,y1,x2,y2) parameter order. X may lie outside [0,1], as in Motion's cubicBezier; a non-finite coordinate degrades to the default curve below with a one-shot warning. Defaults to cubic-bezier(0.4, 0, 0.2, 1) — the exact curve the bundled USS only approximates with the ease-in-out keyword.

BezierX2

Second control point's X (only meaningful when Type is Bezier). See BezierX1.

BezierY1

First control point's Y (only meaningful when Type is Bezier). Left unclamped so an overshoot/anticipate curve is preserved. See BezierX1.

BezierY2

Second control point's Y (only meaningful when Type is Bezier). Left unclamped so an overshoot/anticipate curve is preserved. See BezierX1.

Bounce

How far a spring described by DurationSec overshoots its target: 0 settles without overshooting, and larger values bounce more, as Framer Motion's spring bounce does (one minus the damping ratio, which is held between 0.05 and 1). Null leaves it at 0.3 wherever DurationSec describes the spring. Only meaningful when Type is Spring and none of Stiffness, Damping and Mass is set; a spring setting any of the three takes its physics from them.

Damping

Spring damping (only meaningful when Type is Spring). Higher values settle with less oscillation. Defaults to 10, or to the damping of the spring DurationSec and Bounce describe, as Stiffness says.

DelayChildrenSec

A fixed delay (seconds) added before any inheriting descendant's staggered delay — see StaggerChildrenSec for the full propagation contract. 0 (default) means no fixed delay.

DelaySec

Animation start delay (seconds). Applied as the inline CSS transition-delay style. Foundation for stagger (sequentially delayed animations). 0 means no delay (default). A negative value starts the animation that far into its run, as CSS and Framer Motion do. Note: currently a single delay shared between enter and exit. If a separate exit delay is needed, consider adding ExitDelaySec.

DurationSec

Animation duration (seconds). Applied as the inline transition-duration style. For Bezier it IS the (fixed) duration, exactly as for a plain tween — only the easing sampling differs. For Spring, where none of Stiffness, Damping and Mass is set, it describes the spring together with Bounce, as Framer Motion's spring duration does: a pass of the play ends on its target once this long has passed (held between 0.01 and 10 seconds). A value of exactly 0 lands any spring on its target as soon as its DelaySec has run, where RepeatDelaySec is 0; a spring setting any of the three physics knobs ignores any other duration.

Easing

Easing mode. Applied as the inline transition-timing-function style. Defaults to EaseOut (for enter). Presets in StyleTransition.cs configure enter/exit easing separately. Ignored when Type is Spring: the physics integration IS the curve. Also ignored when Type is Bezier: the BezierX1/BezierY1/BezierX2/BezierY2 control points ARE the curve (an exact numeric one no EasingMode keyword can express).

ExitBezier

The curve an exit of a Bezier play runs on, as Framer Motion's exit transition carries an ease of its own. When null, BezierX1 to BezierY2 drive both directions. Validated as those are.

ExitEasing

Easing mode for exit. When null, Easing is reused. The presets in StyleTransition.cs typically use EaseOut for enter and EaseIn for exit. Ignored when Type is Spring or Bezier: a spring's single stiffness/damping/mass drives both directions, and a bezier's exit curve is ExitBezier.

ExitSpring

The physics an exit of a Spring play runs on, as Framer Motion's exit transition carries a spring of its own. When null, Stiffness, Damping and Mass (or the spring DurationSec and Bounce describe) drive both directions.

Layout

The transition a layoutId move takes in place of this one — Framer's transition.layout. When null, the move takes this transition itself; its Type decides the curve as it does for a variant swap. A layoutId Motion whose caller gives V.Motion no transition, duration, easing or delay moves on Framer's default layout transition, a 0.45 s tween eased by cubic-bezier(0.4, 0, 0.1, 1).

Mass

Spring mass (only meaningful when Type is Spring). Higher values feel heavier / slower to accelerate. Defaults to 1, which is also the mass of a spring DurationSec and Bounce describe.

PropertyOverrides

Optional per-property transition overrides layered on top of the top-level DurationSec / Easing / DelaySec (e.g. opacity tweening in 0.15s while scale takes 0.5s). When set, the implicit "all" catch-all a variant class swap transitions on — the swap carries no transition-* of its own — stays on the top-level timing and these properties follow it, in declaration order, each on its own: as with Framer Motion's per-value transitions, a property no override names keeps the top-level timing. Currently wired only where a variant swap would otherwise set transition-property: all (a variant-driven enter, or an exit driven by a variants + exit label) — a preset transition's own USS-declared transition-property is untouched. Null (default) preserves today's behavior unchanged. Not read when Type is Spring or Bezier: both drive every animated channel with the SAME curve — a spring's Stiffness / Damping / Mass, a bezier's four control points — so there is no per-property override of the model itself (only Tween's per-property duration/easing/delay can be overridden this way).

Repeat

The passes a play makes after its first — Framer Motion's repeat, so Repeat = 2 plays three times. float.PositiveInfinity repeats until a later play, an exit or an unmount replaces it; 0, the default, plays once. RepeatType decides each later pass's direction and RepeatDelaySec the wait between passes. Documentation~/motion.md owns the full contract, including where a play ends and what a layoutId move does with it.

RepeatDelaySec

Seconds a repeating play holds the value one pass ends on before the next pass starts — Framer Motion's repeatDelay. No wait follows the last pass, so it never delays completion. 0 by default.

RepeatType

How each pass after the first runs — Framer Motion's repeatType. Defaults to Loop. Read only when Repeat is above zero.

StaggerChildrenSec

Delay interval (seconds) applied sequentially to each child Motion that inherits its active label from this Motion (it declares variants and none of animate, initial and exit — see Animate) when that label changes or this Motion's mount enter plays: the i-th such child, in document order, is delayed an additional DelayChildrenSec + StaggerChildrenSec

  • i on top of its OWN DelaySec. 0 (default) means no stagger (every inheriting child responds at the same time). Unlike AnimatePresence's own per-child enter/exit stagger (V.AnimatePresence(staggerSec:)), this orchestrates a PLAIN parent → child label propagation — no AnimatePresence boundary is required; toggling this Motion's animate prop is enough. A descendant naming a label of its own opts out of both the label inheritance and this stagger, as Framer's controlling variant nodes do. As Framer Motion's staggerChildren does, the index counts this Motion's own children: a child with variants numbers its own inheriting children from zero, starting them with itself, and only a Motion with neither variants nor a label of its own hands this sequence on to the children below it.
StaggerDirection

The order StaggerChildrenSec numbers the inheriting children in, as Framer Motion's staggerDirection: 1 (default) starts the first child first, and -1 starts the last child first, as does any other value. A child's number counts back from the declared children of this Motion's node, where a component counts as one child.

Stiffness

Spring stiffness (only meaningful when Type is Spring). Higher values snap toward the target faster. Defaults to 100, or, where none of Stiffness, Damping and Mass is set and DurationSec or Bounce is, to the stiffness of the spring that duration and bounce describe.

Type

Selects the animation model: a USS transition-* class swap (Tween, the default), a physics-integrated spring (Spring), or a fixed-duration tween whose easing is an EXACT numeric cubic-bezier curve (Bezier). See TransitionType for the full contract, including what each does and does not animate.

When

Sequences this Motion's own class swap against its inheriting descendants' swaps (see StaggerChildrenSec) when its active label changes or its mount enter plays. Defaults to Together.

Methods

With(float?, EasingMode?, EasingMode?, float?)

Builds a new StyleTransitionConfig that overrides duration / easing on top of the preset. Class-name definitions are copied; only the specified parameters are overridden.