Skip to main content

getCanvasKeyframeChangeOverride()v4.0.530

Shows a keyframe change on the canvas before the source is updated. It returns how the prop is written after the change, as a value for controller.overrides. Use it to preview an easing while its curve is being dragged, or to apply a preset without waiting for the bundler.

warning

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

apply-change.ts
export const applyChange = async (change: CanvasKeyframeChange) => {
  const override = getCanvasKeyframeChangeOverride({propStatus, change});
  if (override) {
    controller.overrides.set(change.nodePathInfo, change.key, override);
  }

  await persist(change);
  controller.overrides.clear(change.nodePathInfo);
};

Clear the override once the composition renders the updated source. Until then, the canvas shows the change even though the source has not caught up, like after startCanvasKeyframeDrag().

Parameters​

An object with the following properties:

propStatus​

How the prop is written in the source before the change, as the props of getNodeProps() report it.

change​

The CanvasKeyframeChange to preview, from getCanvasKeyframeEasingChange(), getCanvasKeyframeSettingsChange(), getCanvasKeyframeToggle() or startCanvasKeyframeDrag(). Every operation is supported: add, remove, move, easing and settings.

Return value​

A DragOverrideValue: {type: 'keyframed', status} with the keyframed status after the operation, or {type: 'static', value} when removing the last keyframe leaves a static prop. null when the operation does not apply to the prop, for example an easing of a prop that is not keyframed.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​