Home › Overview › Flux

Motion

Spring and tween animations (spring, tween) stepped once per frame, plus perceptual Color utilities.

local width = Flux.spring(function() return if open() then 300 else 0 end)

Types

Spring type

type Spring<T> = Graph.Node<T> & {
	-- Adds `delta` to the spring's current velocity without changing its target.
	impulse: (self: any, delta: T) -> (),
	-- Replaces the spring's velocity outright without changing its target.
	setVelocity: (self: any, velocity: T) -> (),
	-- Sets the spring's current animated value immediately without altering its target or velocity.
	setCurrent: (self: any, value: T) -> (),
	-- Jumps both the target and current value to `value` and zeroes the velocity.
	snap: (self: any, value: T) -> (),
}

Functions

step

Motion.step(dt: number?)

Advances every active spring and tween by dt seconds (or the time since the last step). Wired to RunService automatically in Roblox, so you only call this in tests (Flux.Motion.step(1 / 60)).

Open Documentation

spring

Motion.spring<A>(target: A, frequency: Reactive<number>?, damping: Reactive<number>?, initialVelocity: any?): Spring<Unwrap<A>>

Creates a node that animates toward target using an analytic harmonic oscillator (frequency in Hz and damping ratio both default to 1 and may be reactive). Retargets preserve current velocity.

local size = Flux.spring(function() return if open() then 300 else 0 end, 4)

Open Documentation

tween

Motion.tween<A>(target: A, tweenInfo: Reactive<TweenInfo>?): Graph.Node<Unwrap<A>>

Creates a node that eases toward target over a TweenInfo curve. When target or tweenInfo changes, the tween restarts from its current value without waiting for DelayTime.

Open Documentation

Oklab

fromLinear

Motion.Color.Oklab.fromLinear(color: Color3): Vector3

Converts a Color3 in linear sRGB space to a Vector3 in Oklab space.

toLinear

Motion.Color.Oklab.toLinear(color: Vector3, clamped: boolean?): Color3

Converts a Vector3 in Oklab space to a Color3 in linear sRGB space.

fromRGB

Motion.Color.Oklab.fromRGB(rgb: Color3): Vector3

Converts a Color3 in sRGB space to a Vector3 in Oklab space.

toRGB

Motion.Color.Oklab.toRGB(lab: Vector3, clamped: boolean?): Color3

Converts a Vector3 in Oklab space to a Color3 in sRGB space.

lighten

Motion.Color.Oklab.lighten(lab: Vector3, amount: number): Vector3

Raises Oklab lightness by amount (negative darkens).

saturate

Motion.Color.Oklab.saturate(lab: Vector3, amount: number): Vector3

Raises Oklab chroma by amount, preserving hue and lightness (negative desaturates).

rotateHue

Motion.Color.Oklab.rotateHue(lab: Vector3, degrees: number): Vector3

Rotates hue by degrees, preserving chroma and lightness.

grayscale

Motion.Color.Oklab.grayscale(lab: Vector3): Vector3

Removes all chroma, preserving Oklab lightness.

mix

Motion.Color.Oklab.mix(lab1: Vector3, lab2: Vector3, alpha: number): Vector3

Linearly interpolates between lab1 and lab2 in Oklab space by alpha.

sRGB

fromLinear

Motion.Color.sRGB.fromLinear(color: Color3): Color3

Converts linear sRGB space to sRGB space.

toLinear

Motion.Color.sRGB.toLinear(color: Color3): Color3

Converts sRGB space to linear sRGB space.

Color

lighten

Motion.Color.lighten(c: Color3, amount: number): Color3

Raises the perceptual lightness of c in Oklab space by amount (negative darkens).

Open Documentation

saturate

Motion.Color.saturate(c: Color3, amount: number): Color3

Raises the chroma of c in Oklab space by amount while preserving hue and lightness (negative desaturates).

Open Documentation

rotateHue

Motion.Color.rotateHue(c: Color3, degrees: number): Color3

Rotates the hue of c by degrees around the Oklab color wheel while preserving chroma and lightness.

Open Documentation

grayscale

Motion.Color.grayscale(c: Color3): Color3

Strips all chroma from c, returning a neutral gray with the same Oklab perceptual lightness.

Open Documentation

mix

Motion.Color.mix(a: Color3, b: Color3, t: number): Color3

Blends a and b in Oklab space by unclamped fraction t (0 = a, 1 = b).

Open Documentation

luminance

Motion.Color.luminance(c: Color3): number

Returns the WCAG relative luminance of c from 0 (black) to 1 (white).

Open Documentation

contrast

Motion.Color.contrast(a: Color3, b: Color3): number

Returns the WCAG contrast ratio between a and b from 1 (identical) to 21 (black on white).

Open Documentation

readable

Motion.Color.readable(bg: Color3, dark: Color3?, light: Color3?): Color3

Returns whichever of dark (default black) or light (default white) has the higher WCAG contrast ratio against bg.

Open Documentation

Spring

Constructors: Motion.spring · Motion.tween

set

Spring:set<T>(value: T)

Retargets the animation toward value from its current position (motion(value) does the same). If value is a node, it's read once.

Open Documentation

impulse

Spring:impulse<T>(delta: T)

(Spring only) Adds delta to the spring's current velocity without changing its goal.

Open Documentation

setVelocity

Spring:setVelocity<T>(velocity: T)

(Spring only) Replaces the spring's current velocity with velocity without changing its goal.

Open Documentation

setCurrent

Spring:setCurrent<T>(value: T)

(Spring only) Sets the spring's current animated value immediately without changing its target or velocity.

Open Documentation

snap

Spring:snap<T>(value: T)

(Spring only) Jumps both the target and current value of the spring to value and zeroes its velocity.

Open Documentation