Skip to main content

getCanvasKeyframeEasingChange()v4.0.530

Returns the change that sets the easing between two adjacent keyframes of a prop. Use it to build an easing picker for a selected segment.

warning

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

EasingPicker.tsx
export const EasingPicker = () => {
  return (
    <>
      {canvasKeyframeEasingPresets.map((preset) => (
        <button
          key={preset.id}
          onClick={() => {
            const change = getCanvasKeyframeEasingChange({
              nodePathInfo,
              schema,
              key: 'style.opacity',
              propStatus,
              segmentIndex,
              easing: preset.easing,
            });
            if (change) {
              persist(change);
            }
          }}
        >
          {preset.label}
        </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.

schema​

The interactivity schema of the element, from track.sequence.controls.

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.

segmentIndex​

The segment to change, as reported by getCanvasKeyframeEasingSegments().

easing​

The new CanvasKeyframeEasing: {type: 'linear'}, {type: 'step1'} for a hold until the next keyframe, {type: 'bezier', x1, y1, x2, y2} or {type: 'spring', damping, mass, stiffness, overshootClamping, allowTail, durationRestThreshold}. They are written as Easing.linear, Easing.step1, Easing.bezier() and Easing.spring().

Return value​

A CanvasKeyframeChange whose operation is {type: 'easing', segmentIndex, easing}, or null when the prop is not keyframed, its easing cannot be edited or the segment does not exist. Persist it with updateNodeKeyframes() like the changes of getCanvasKeyframeToggle().

To show the easing on the canvas before the source is updated, for example while a bezier handle is being dragged, pass the change to getCanvasKeyframeChangeOverride().

Presets​

canvasKeyframeEasingPresets lists the easings the Remotion Studio offers, starting with linear: ease in, ease out, ease in-out, hold and three springs. Each CanvasKeyframeEasingPreset has an id, a label and an easing.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​