blendedColourCss

Converts a colour attribute to CSS, blending from the old colour to the new one while a !cue.to change is under way.

@internote/canvas-sdkFunction
On this page
import { blendedColourCss } from '@internote/canvas-sdk';

The blend is a color-mix(), so theme variables inside it stay live, and it follows the cue's authored duration and easing. The data layer snaps between two palette names, because there is no name halfway between teal and red; the blend happens here, where a name has become paint.

#Signature

(
    resolved: unknown,
    transition: TrackTransition | null | undefined,
    fallback: string,
): string

#Parameters

resolved
The colour attribute's value at this moment.
transition
The attribute's transition from ctx.animation.attrTransition, or null when it carries no track.
fallback
The CSS to use when the value is not a colour.

#Example

<circle fill={blendedColourCss(attrs.colour, ctx.animation.attrTransition(node, 'colour'), 'var(--grey-7)')} />

Declared in packages/canvas-sdk/src/paint/index.ts:327.

Last updated