Skip to main content

Transitions

When using scene-based composition, you can use transitions to animate layout changes. We provide a number of basic built-in transitions including basic fades, sliding animations and stingers.

Using layout transitions​

When you create or update a layout you have the option to define a number of layout transitions for when this layout is switched to. You can use thefromLayoutIds property on each transition to restrict the source layouts that the transition will apply to. By default a random transition will be selected from defined list unless the fromLayoutIds property is defined.

await api.LayoutApi().layout.createLayout({
    layout: {
        width: project.rendering?.video?.width,
        height: project.rendering?.video?.height,
        collectionId: project.collectionId,
        projectId: project?.projectId,
        type: LayoutApiModel.LayoutType.LAYOUT_TYPE_SCENE,

        transitions: [
            {
                // This transition will be used when coming from a layout without a specific transition.
                fromLayoutIds: [],

                // Crossfade the scene over 1000ms
                crossfade: {
                    durationMs: 1000,
                }
            },
            {
                // When coming from this specific layout ID
                fromLayoutIds: ['466a8b2b-6270-45a4-a3c4-946e6f8269a7'],

                // Display a stinger animation.
                stinger: {
                    cut: {
                        // With this stinger, the screen is fully covered at this point, enabling us to swap the content.
                        cutPointMs: 475,

                        // Externally hosted media to play.
                        media: {
                            volume: 1,
                            url: 'https://api.stream/assets/example-stinger.webm',
                        }
                    }
                }
            }
        ]
    }
});

Demos​

Cut​

The cut transition enables an instant cut between two layouts.

Crossfade​

The crossfade transition will cause the the layout and audio to fade between the source and destination over the duration defined.

Fade to color​

The fadeToColor transition causes the source layout to fade to the defined color in half of the time specified. The target layout will then fade in over the remaining duration.

Swipe​

The swipe transition enables you to slide one or more of the layouts with a customizable direction:

  • TRANSITION_SWIPE_TYPE_COMBINED will move both the source and destination layouts together, giving the effect of one pushing the other.
  • TRANSITION_SWIPE_TYPE_SOURCE will slide the source layout out over top, revealing the destination layout.
  • TRANSITION_SWIPE_TYPE_DESTINATION will slide the destination layout over top of the source layout.

Stinger​

The stinger transition enables you to play a media clip over top of both layouts, cutting between layouts at a point where the screen is covered. You should have multiple frames where the screen is fully covered to enable the layout switch (this being your cutPointMs).