Skip to main content

getCanvasKeyframeToggle()v4.0.530

Describes the keyframe button of a prop at a frame: whether the prop can be keyframed, whether a keyframe exists at the frame, where the neighboring keyframes are, and the change that adds or removes a keyframe there.

warning

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

KeyframeButton.tsx
export const KeyframeButton = () => {
  const toggle = getCanvasKeyframeToggle({
    nodePathInfo,
    track,
    schema,
    key: 'style.opacity',
    propStatus,
    frame,
    durationInFrames,
  });
  if (!toggle.keyframable && !toggle.hasKeyframe) {
    return null;
  }

  return (
    <>
      <button
        disabled={toggle.previousFrame === null}
        onClick={() => seek(toggle.previousFrame!)}
      >
        ◀
      </button>
      <button
        disabled={toggle.change === null}
        onClick={() => persist(toggle.change!)}
      >
        {toggle.hasKeyframe ? '◆' : '◇'}
      </button>
      <button
        disabled={toggle.nextFrame === null}
        onClick={() => seek(toggle.nextFrame!)}
      >
        ▶
      </button>
    </>
  );
};

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 frame to the frame clock of the interpolation.

schema​

The interactivity schema of the element, from track.sequence.controls. It decides whether the field can be keyframed and provides the default value of an unset prop.

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.

frame​

The composition frame at which the button acts, usually the playhead.

durationInFrames​

The duration of the composition. Keyframes outside of it are not offered for navigation.

Return value​

A CanvasKeyframeToggle object with the following properties.

keyframable​

Whether a keyframe can be added: the field type supports interpolation and the value is not computed in code.

hasKeyframe​

Whether the prop has a keyframe at frame.

previousFrame​

The composition frame of the closest keyframe before frame, or null.

nextFrame​

The composition frame of the closest keyframe after frame, or null.

change​

A CanvasKeyframeChange, or null when neither adding nor removing is possible. When hasKeyframe is true, its operation is {type: 'remove', frame, valueWhenLastKeyframeDeleted: null}; otherwise {type: 'add', frame, value} with the value the prop has at the frame: the interpolated value of a keyframed prop, the code value of a static prop, or the schema default. Font weights are normalized to numbers so they can be interpolated.

frame in the operation is in the frame clock of the interpolation. Persist the change with updateNodeKeyframes(): a CanvasKeyframeChange carries nodePathInfo to resolve the node, the key, the schema and the operation, which matches the updates entries of the codemod.

Persisting a change
export const persist = (change: CanvasKeyframeChange) => {
  const {absolutePath, nodePath} = change.nodePathInfo.sequenceSubscriptionKey;
  return updateNodeKeyframes({
    project,
    node: {filePath: absolutePath, nodePath},
    updates: [{key: change.key, operation: change.operation}],
    schema: change.schema,
  });
};

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​