One color at one position along a color ramp — the building block you place,
offset, and animate to shape a sk-ramp-color-map's gradient.
Declarative element:
<sk-color-stop>
Not on the sk.* global — construct via the declarative element or a module import.
This is the stop element of the ColorMap family, the typed child of
sk-ramp-color-map: a ramp is built from a sequence of these stops, each
pinning a color to a position on the ramp. It is modeled on SVG's <stop>
(hence the stop-offset / stop-color names). Unlike an inert keyframe, a
color stop is itself a SkenraAnimatable, so its own values can change at
runtime; each change notifies the owning ramp, which re-sorts its stops and
rewrites GPU uniforms without recompiling (stops are shader data).
Key attributes. stop-offset is the position on the ramp in [0, 1] —
driven through a sk-tonemap, 0 is full shadow and 1 is full light.
stop-color is the color at that position. interpolation is the blend mode
for the ramp segment that starts at this stop (linear | step | smooth),
so a step stop produces a hard color band rather than a gradient.
Related. Its parent is always a sk-ramp-color-map; that ramp is
typically driven by a sk-tonemap. Animating a stop uses the same
<sk-animation> / <sk-keyframe> mechanism as any other animatable.
constructor()Inherited from: SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
stopColoranimatable |
ColorBase |
— | Gets the stop color, returning the animated value when animating. | ColorStop |
baseStopColorread-only |
ColorBase |
— | Gets the base (non-animated) stop color value. | ColorStop |
stopOffsetanimatable |
number |
0 |
Gets the stop position on the ramp, returning the animated value | ColorStop |
baseStopOffsetread-only |
number |
— | Gets the base (non-animated) stop position value. | ColorStop |
interpolationanimatable |
InterpolationMode |
"linear" |
Gets the interpolation mode for the segment starting at this stop, | ColorStop |
baseInterpolationread-only |
InterpolationMode |
— | Gets the base (non-animated) interpolation mode. | ColorStop |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
const stop = document.createElement('sk-color-stop') as ColorStop;
stop.stopOffset = 0.5;
stop.stopColor = Color.coral;
stop.interpolation = 'smooth';