Skip to main content

getCanvasKeyframes()v4.0.530

Places the keyframes of a prop on the composition timeline. Use it to draw keyframe markers in a timeline row.

warning

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

KeyframeRow.tsx
export const KeyframeRow = () => {
  const keyframes = getCanvasKeyframes({track, propStatus});
  return (
    <div style={{position: 'relative'}}>
      {keyframes.map((keyframe) => (
        <div
          key={keyframe.frame}
          style={{position: 'absolute', left: keyframe.frame * pixelsPerFrame}}
        >
          ◆
        </div>
      ))}
    </div>
  );
};

A prop animated with interpolate() stores its keyframes in the frame clock of that expression. A sequence that starts later than frame 0, a nested <Sequence> or a playbackRate shift and stretch those frames on the composition timeline. This function applies the timing of the track so the markers line up with the playhead.

Parameters​

An object with the following properties:

track​

The TimelineTrackData of the sequence from controller.timeline. Only keyframeDisplayOffset and keyframePlaybackRate are read.

propStatus​

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

Return value​

An array of CanvasKeyframe objects with frame in composition frames and value, ordered like the keyframes of the source. Frames may be fractional or lie outside the composition.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​