Skip to main content

getCanvasKeyframeValueChange()v4.0.541

Returns the change that replaces the value of an existing keyframe. Use it to edit a selected keyframe without moving the playhead or adding a keyframe at the playhead.

warning

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

set-keyframe-opacity.ts
export const setKeyframeOpacity = async (value: number) => {
  const change = getCanvasKeyframeValueChange({
    nodePathInfo,
    track,
    schema,
    key: 'style.opacity',
    propStatus,
    frame: selectedKeyframe.frame,
    value,
  });
  if (change === null) {
    return;
  }

  const override = getCanvasKeyframeChangeOverride({propStatus, change});
  if (override !== null) {
    controller.overrides.set(change.nodePathInfo, change.key, override);
  }

  try {
    const {absolutePath, nodePath} = change.nodePathInfo.sequenceSubscriptionKey;
    const result = await updateNodeKeyframes({
      project,
      node: {filePath: absolutePath, nodePath},
      updates: [{key: change.key, operation: change.operation}],
      schema: change.schema,
    });
    await applyProjectAndWaitForPreview(applyCodemodChanges(project, result.changes));
  } finally {
    controller.overrides.clear(change.nodePathInfo);
  }
};

selectedKeyframe comes from getCanvasKeyframes(). Your editor implements applyProjectAndWaitForPreview() to apply the updated files and wait until the composition renders them. Keep the override until then; clear it if persistence fails.

Parameters​

An object with the following properties:

nodePathInfo​

The SequenceNodePathInfo of the sequence, from a track or a selection item. It is passed through to the returned change.

track​

The TimelineTrackData of the sequence from controller.timeline. Its keyframeDisplayOffset and keyframePlaybackRate convert the composition frame to the frame clock of the interpolation.

schema​

The interactivity schema of the element, from track.sequence.controls. The field must support keyframes.

key​

The schema key of the prop in dot notation, for example 'style.opacity'.

propStatus​

How the prop is written in the source, as the props of getNodeProps() report it. null or a status other than 'keyframed' returns null.

frame​

The composition frame of the keyframe to change, from getCanvasKeyframes(). Pass this frame without rounding: nested timing and playback rates can place keyframes at fractional composition frames.

value​

The replacement value. Font-weight fields normalize 'normal' to 400, 'bold' to 700, and numeric strings to numbers. Relative font weights such as 'bolder' and 'lighter' are not supported. Other values are passed through.

Return value​

A CanvasKeyframeChange whose operation is {type: 'add', frame, value}. The operation replaces the existing keyframe at its exact source frame and preserves the other keyframes and interpolation settings.

Returns null when the prop cannot be keyframed, no keyframe exists at the supplied frame, or the replacement is null, undefined, or unsupported. Values for interpolate() and interpolateColors() are checked for compatibility with the interpolation. Values for interpolatePaths() must be strings; SVG path data is not validated.

Pass the change to getCanvasKeyframeChangeOverride() for an immediate preview, and persist it with updateNodeKeyframes(), as in the example above.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​