Transitions

The Transitions config allows you to add transitions to a layer. Each transition type has both in and out variants, which will apply the transition to either the beginning or end of the clip, respectively.

Interface

interface Transitions {
  // defaults to empty array
  transitions?: [
    {
      // seconds that transition takes to complete
      duration: number;


      type: "fadeIn" | "fadeOut" | "crossfadeIn" | "crossfadeOut";
    }
  ];
}

Configuring Transitions

You can modify a layer's transitions-related settings by passing a configuration object or by calling its setters. You can read the layer's transitions-related settings by calling its getters

Configuration Object

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/fire-horizontal-short.mp4",
  {
    transitions: [
      {
        duration: 1, // number of seconds
        type: "fadeIn", // transition type
      },
    ],
  }
);

Output

Setters

addTransition

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/fire-horizontal-short.mp4"
);


video.addTransition({
  duration: 1,
  type: "fadeIn",
});

Output

Transition Types

The following transition types are supported:

• Fade
• Crossfade

Fade

The fade transition will fade a visual layer from fully opaque to transparent over the provided duration. It will fade an Audio layer from its current volume to zero over the provided duration. Video layers will fade both visually and audibly.

Fade In

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/fire-horizontal-short.mp4"
);


video.addTransition({
  duration: 1,
  type: "fadeIn",
});

Output

Fade Out

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/fire-horizontal-short.mp4"
);


video.addTransition({
  duration: 1,
  type: "fadeOut",
});

Output

Crossfade

Crossfades make it easy to fade one sequenced layer into another. It automatically modifies the start positions of each layer so they overlap for the duration that you specify.

Crossfade In

const video1 = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/dog-in-car-short.mp4"
);


const video2 = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/fire-horizontal-short.mp4"
);


video2.addTransition({
  duration: 1,
  type: "crossfadeIn",
});


await composition.addSequence([video1, video2]);

Output

Crossfade Out

const video1 = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/dog-in-car-short.mp4"
);


const video2 = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/transitions/fire-horizontal-short.mp4"
);


video1.addTransition({
  duration: 1,
  type: "crossfadeOut",
});


await composition.addSequence([video1, video2]);

Output

Getters

image.transitions; // -> [{ duration: 1, type: 'crossfadeIn'}, { duration: 2, type: 'fadeOut'}]