Layer configuration
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
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'}]