Skip to main content

getCanvasKeyframeSettings()v4.0.530

Reads the interpolate() options of a keyframed prop that an editor can change: the extrapolation, the output mode and posterize. It also tells which options apply to the interpolation function of the prop.

warning

Experimental API: This package is not stable. Its public API may change without a major version bump.

InterpolationSettings.tsx
export const InterpolationSettings = () => {
  const settings = getCanvasKeyframeSettings(propStatus);
  return (
    <>
      {settings.clamping ? (
        <select value={settings.clamping.left}>
          {settings.extrapolateTypes.map((type) => (
            <option key={type}>{type}</option>
          ))}
        </select>
      ) : null}
      <input type="number" value={settings.posterize ?? ''} />
    </>
  );
};

Parameters​

propStatus​

The 'keyframed' prop status of the prop, as the props of getNodeProps() report it.

Return value​

A CanvasKeyframeSettings object with the following properties.

clamping​

The extrapolateLeft and extrapolateRight options as {left, right}: how the value behaves before the first and after the last keyframe. null when the interpolation function has no extrapolation options, as interpolateColors() does not.

extrapolateTypes​

The ExtrapolateType values the prop accepts: 'extend', 'clamp', 'identity' and 'wrap' for interpolate(), without 'identity' for interpolatePaths(). Empty when clamping is null.

posterize​

The posterize option: the animation is sampled every posterize frames. null when the value changes on every frame.

output​

The output option, 'linear' or 'perceptual-scale'. null when the interpolation function has no output modes; only interpolate() has them.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​