> For the complete documentation index, see [llms.txt](https://docs.dbnetsoft.com/dbnetsoft/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dbnetsoft.com/dbnetsoft/screenspro/projects-and-configs/transitions.md).

# Transitions

A transition animates the change from the layout on air to the next one. It applies to the layouts shown on air, not to background and overlay layouts.

## Settings pane

The Transition row of the settings pane selects the transition mode. As every layout is loaded either for a transition or directly on air, changing the mode shows a warning first: with Apply, all layouts on air and in preview are unloaded and all clients (also text clients) are disconnected. Background and overlay layouts stay. Cancel keeps the current mode.

## Config settings

| Setting              |          |                                                                                        |
| -------------------- | -------- | -------------------------------------------------------------------------------------- |
| TransitionMode       | Enum     | The transition, see below. `None` (default): the next layout replaces the current one. |
| TransitionDuration   | TimeSpan | Duration of the transitions that support it, see below. Default 0.5 seconds.           |
| TransitionHeight     | double   | Distance in pixels for `TopBottomFade` and `BottomTopFade`. Default 128.               |
| TransitionWidth      | double   | Distance in pixels for `LeftRightFade`. Default 1920.                                  |
| TransitionStartPoint | Point    | Start of the movement for `Down`. Default `0,0`.                                       |
| TransitionEndPoint   | Point    | End of the movement for `Down`. Default `0,64`.                                        |

## Transition modes

| Mode          | Duration           |                                                                                                                                                                                                                     |
| ------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| None          |                    | No transition, the next layout replaces the current one.                                                                                                                                                            |
| Fade          | TransitionDuration | Crossfade from the current to the next layout.                                                                                                                                                                      |
| FadeInOut     | 0.3 + 0.3 seconds  | The current layout fades out, then the next one fades in.                                                                                                                                                           |
| FadeAndGrow   | 0.5 seconds        | At the same time, the current layout fades out while growing to 120 %, the next one fades in while growing from 80 % to its size.                                                                                   |
| FadeInOutGrow | 0.5 + 0.5 seconds  | The current layout fades out while growing to 120 %, then the next one fades in while growing from 80 % to its size.                                                                                                |
| TopBottomFade | TransitionDuration | The current layout moves down by TransitionHeight and fades out, the next one comes from above and fades in.                                                                                                        |
| BottomTopFade | TransitionDuration | The current layout moves up by TransitionHeight and fades out, the next one comes from below and fades in.                                                                                                          |
| LeftRightFade | TransitionDuration | The current layout moves right by TransitionWidth and fades out, the next one comes from the left and fades in.                                                                                                     |
| Down          | TransitionDuration | The next layout moves from TransitionStartPoint to TransitionEndPoint.                                                                                                                                              |
| ArrowMask     | TransitionDuration | An arrow pointing down wipes from top to bottom, with a half transparent leading edge: the next layout appears behind the arrow, the current one disappears. Without a duration 32 frames at 25 fps (1.28 seconds). |

Transitions also work with layouts that have a transparent background: the transition covers the whole output, not only the drawn elements.