GTKX

API Reference / @gtkx/animated / InterpolatorConfig

Type Alias: InterpolatorConfig<Output> ​

InterpolatorConfig<Output> = object

Type Parameters ​

Output ​

Output = Animatable

Properties ​

easing? ​

optional easing?: EasingFunction

Custom easing to apply in interpolator.

extrapolate? ​

optional extrapolate?: ExtrapolateType

What happens when the spring exceeds its target value. Shortcut to set extrapolateLeft and extrapolateRight.

  • extend continues the interpolation past the target value
  • clamp limits the interpolation at the max value
  • identity sets the value to the interpolation input as soon as it hits the boundary

Default ​

ts
'extend'

extrapolateLeft? ​

optional extrapolateLeft?: ExtrapolateType

What happens when the spring goes below its target value.

  • extend continues the interpolation past the target value
  • clamp limits the interpolation at the max value
  • identity sets the value to the interpolation input as soon as it hits the boundary

Default ​

ts
'extend'

extrapolateRight? ​

optional extrapolateRight?: ExtrapolateType

What happens when the spring exceeds its target value.

  • extend continues the interpolation past the target value
  • clamp limits the interpolation at the max value
  • identity sets the value to the interpolation input as soon as it hits the boundary

Default ​

ts
'extend'

map? ​

optional map?: (value) => number

Transformation to apply to the value before interpolation.

Parameters ​

value ​

number

Returns ​

number

output ​

output: readonly Constrain<Output, Animatable>[]

Output values from the interpolation function. Should match the length of the range array.

range? ​

optional range?: readonly number[]

Input ranges mapping the interpolation to the output values.

Example ​

ts
range: [0, 0.5, 1], output: ['yellow', 'orange', 'red']

Default ​

ts
[0,1]